feat(layout): list 增加 click 事件

jd-opensource · Jul 31, 2018 · 0d80914 · 0d80914
1 parent 5b88597
commit 0d80914
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/app.js b/src/app.js
@@ -34,11 +34,12 @@ class App extends Component {
       'pages/navigation/tabs/index',
       'pages/navigation/tab-bar/index',
       'pages/navigation/segmented-control/index',
-      'pages/navigation/nav-bar/index'
+      'pages/navigation/nav-bar/index',
       // 'pages/layout/flex/index'
       // 'pages/layout/grid/index',
       // 'pages/layout/float-layout/index',
-      // 'pages/layout/card/index'
+      // 'pages/layout/card/index',
+      'pages/layout/list/index'
     ],
     window: {
       backgroundTextStyle: 'light',

diff --git a/src/components/list/item/index.js b/src/components/list/item/index.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Image, Switch } from '@tarojs/components'
 
@@ -12,6 +13,7 @@ export default class AtListItem extends Component {
       arrow,
       title,
       thumb,
+      onClick,
       isSwitch,
       extraText,
       extraThumb
@@ -28,7 +30,7 @@ export default class AtListItem extends Component {
     }
 
     return (
-      <View className={rootClass}>
+      <View className={rootClass} onClick={onClick}>
         {thumb && (
           <View className='at-list__item-thumb item-thumb'>
             <Image className='item-thumb-info' mode='scaleToFill' src={thumb} />
@@ -72,3 +74,18 @@ export default class AtListItem extends Component {
     )
   }
 }
+
+AtListItem.defaultProps = {
+  onClick: () => {}
+}
+
+AtListItem.propTypes = {
+  note: PropTypes.string,
+  title: PropTypes.string,
+  thumb: PropTypes.string,
+  onClick: PropTypes.func,
+  isSwitch: PropTypes.bool,
+  extraText: PropTypes.string,
+  extraThumb: PropTypes.string,
+  arrow: PropTypes.oneOf(['right', 'top', 'bottom', 'left'])
+}
diff --git a/src/pages/layout/list/index.js b/src/pages/layout/list/index.js
@@ -23,7 +23,10 @@ export default class ListPage extends Component {
             <View className='panel__title'>基础列表</View>
             <View className='panel__content'>
               <View className='example__body'>
-                <AtListItem title='标题文字' />
+                <AtListItem
+                  title='标题文字'
+                  onClick={console.log.bind(this, 1)}
+                />
                 <AtListItem title='标题文字' arrow='right' />
                 <AtListItem
                   arrow='right'