feat(tab-bar): 修改示例

jd-opensource · Aug 1, 2018 · a38da87 · a38da87
1 parent 632c148
commit a38da87
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/src/components/tab-bar/index.js b/src/components/tab-bar/index.js
@@ -21,16 +21,13 @@ import './index.scss'
  *  count: {Number} 显示的数字 [可选]
  *  dot: {Boolean} 是否显示红点，如果有count，优先显示count [可选]
  *  示例: [{ title: '标签页1',iconType: '', dot: true, iconSize:24, selectedIconType: '',count: 8 }, { title: '标签页2' }]
- * @prop onClick {Function} 点击时触发事件，回调参数 {value: 1}
+ * @prop onClick {Function} 点击时触发事件，回调参数：列表索引值
  */
 class AtTabBar extends Taro.Component {
   handleClick (i) {
-    this.props.onClick({ value: i })
+    this.props.onClick(i)
   }
 
-  showCount (count) {
-    return parseInt(count) > 99 ? '99+' : count
-  }
   render () {
     const { fixed, backgroundColor, tabList, current, color, iconSize, fontSize, selectedColor } = this.props
     const defaultStyle = `color: ${color};`
@@ -53,7 +50,7 @@ class AtTabBar extends Taro.Component {
               }
               {
                 item.count
-                  ? <View className='at-tab-bar__count'>{this.showCount(item.count)}</View>
+                  ? <View className='at-tab-bar__count'>{item.count}</View>
                   : null
               }
               {

diff --git a/src/components/tab-bar/index.scss b/src/components/tab-bar/index.scss
@@ -42,9 +42,9 @@
     position: absolute;
     display: inline-flex;
     top: -10px;
-    right: 0;
+    right: -20px;
     padding: 10px;
-    width: 20px;
+    min-width: 20px;
     height: 20px;
     line-height: 100%;
     font-size: 18px;

diff --git a/src/pages/navigation/tab-bar/index.js b/src/pages/navigation/tab-bar/index.js
@@ -13,15 +13,15 @@ export default class Index extends Taro.Component {
       current: 0,
     }
   }
-  handleClick (detail) {
+  handleClick (value) {
     this.setState({
-      current: detail.value
+      current: value
     })
   }
   render () {
     const { current } = this.state
     const tabList1 = [{ title: '标签页1', dot: true }, { title: '标签页2', count: 8 }]
-    const tabList2 = [{ title: '标签页1', iconType: 'computer', dot: true, selectedIconType: 'computer_fill', count: 100 }, { title: '标签页2', iconType: 'computer', dot: true }, { title: '标签页3', iconType: 'computer', count: '99' }]
+    const tabList2 = [{ title: '标签页1', iconType: 'computer', dot: true, selectedIconType: 'computer_fill', count: 'new' }, { title: '标签页2', iconType: 'computer', dot: true }, { title: '标签页3', iconType: 'computer', count: '99' }]
     return (
       <View className='example__body'>
         <View className='item'>