From 7f628792fc3d6b6238dd0a6e7230a72f6e1f0d67 Mon Sep 17 00:00:00 2001
From: jimczj <jimczj@gmail.com>
Date: Thu, 30 Aug 2018 17:03:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20#32=20tab=20=E9=AB=98=E5=BA=A6=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/markdown/tabs.md               | 68 ++++++++++++++++++++++++++---
 src/components/tabs-pane/index.js   | 28 +++++++++---
 src/components/tabs-pane/index.scss |  9 ++++
 src/components/tabs/index.js        |  1 -
 src/pages/navigation/tabs/index.js  | 30 ++++++-------
 5 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/docs/markdown/tabs.md b/docs/markdown/tabs.md
index 08596fc32..7753a7ace 100644
--- a/docs/markdown/tabs.md
+++ b/docs/markdown/tabs.md
@@ -1,7 +1,8 @@
 # Tabs 标签页
 
 ---
-标签页组件，用于让用户在不同的视图中进行切换。在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突
+标签页组件，用于让用户在不同的视图中进行切换。在 H5 上，不建议使用左右滑动来切换 Tab，这个跟某些浏览器自带的切换页面事件存在冲突，
+如果只是支持微信浏览器的 H5，不会产生冲突。
 
 ## 使用指南
 
@@ -10,13 +11,16 @@
 :::demo
 
 ```js
-import { AtTabs, AtTabsPane} from 'taro-ui'
+import { AtTabs, AtTabsPane } from 'taro-ui'
 ```
 
 :::
 
 ## 一般用法
 
+说明： 该用法适合等宽标签，标签数不建议超过4个，超过4个建议使用**滚动标签栏**，增加 `scroll` 参数(见下)。
+由于小程序的限制，无法遍历 `this.props.children`, `AtTabsPane` 需要用户自行传入 `current` 和 `index` 参数
+
 :::demo
 
 ```html
@@ -28,18 +32,72 @@ import { AtTabs, AtTabsPane} from 'taro-ui'
     { title: '标签页3' }
   ]}
   onClick={this.handleClick}>
-  <AtTabsPane>
+  <AtTabsPane current={this.state.current} index={0}>
     <View className='tab-content'>标签页一的内容</View>
   </AtTabsPane>
-  <AtTabsPane>
+  <AtTabsPane current={this.state.current} index={1}>
     <View className='tab-content'>标签页二的内容</View>
   </AtTabsPane>
-  <AtTabsPane>
+  <AtTabsPane current={this.state.current} index={2}>
     <View className='tab-content'>标签页三的内容</View>
   </AtTabsPane>
 </AtTabs>
 ```
 
+:::
+
+## 滚动标签栏
+
+:::demo
+
+```html
+<AtTabs
+  current={this.state.current}
+  scroll
+  tabList={[
+    { title: '标签页1' },
+    { title: '标签页2' },
+    { title: '标签页3' },
+    { title: '标签页4' },
+    { title: '标签页5' },
+    { title: '标签页6' },
+    { title: '标签页7' },
+    { title: '标签页8' },
+    { title: '标签页9' }
+  ]}
+  onClick={this.handleClick}>
+  <AtTabsPane current={this.state.current} index={0}>
+    <View className='tab-content'>标签页一的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={1}>
+    <View className='tab-content'>标签页二的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={2}>
+    <View className='tab-content'>标签页三的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={3}>
+    <View className='tab-content'>标签页四的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={4}>
+    <View className='tab-content'>标签页五的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={5}>
+    <View className='tab-content'>标签页六的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={6}>
+    <View className='tab-content'>标签页七的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={7}>
+    <View className='tab-content'>标签页八的内容</View>
+  </AtTabsPane>
+  <AtTabsPane current={this.state.current} index={8}>
+    <View className='tab-content'>标签页九的内容</View>
+  </AtTabsPane>
+</AtTabs>
+```
+
+:::
+
 ## 禁止内容切换动画
 
 :::demo
diff --git a/src/components/tabs-pane/index.js b/src/components/tabs-pane/index.js
index 2da7ad3d9..0eb5c5920 100644
--- a/src/components/tabs-pane/index.js
+++ b/src/components/tabs-pane/index.js
@@ -1,21 +1,37 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
 
 import AtComponent from '../../common/component'
 import './index.scss'
 
 /**
  * @author:chenzeji
- * @description tabs 标签页
+ * @description tabs 标签内容页
+ * @prop index {Number} 在页面容器的的索引值 default:0
  * @prop current {Number} 当前选中的tab index值，从0计数，default:0
- * @prop color {String} 选中标签的颜色
- * @prop scroll {Boolean} 是否横向滚动，default:false
- * @prop tabList {Array} tab 列表 eg: [{ title: '标签页1' }, { title: '标签页2' }]
- * @prop onClick {Function} 点击时触发事件，回调参数 {value: 1}
  */
 class AtTabsPane extends AtComponent {
+  static defaultProps = {
+    index: 0,
+    current: 0
+  }
+
+  static propTypes = {
+    index: PropTypes.number,
+    current: PropTypes.number
+  }
+
   render () {
-    return <View className='tabs-pane'>
+    const { index, current } = this.props
+    const rootCls = ['tabs-pane']
+    if (index === current) {
+      rootCls.push('tabs-pane--active')
+    } else {
+      rootCls.push('tabs-pane--inactive')
+    }
+
+    return <View className={rootCls}>
       {this.props.children}
     </View>
   }
diff --git a/src/components/tabs-pane/index.scss b/src/components/tabs-pane/index.scss
index 71ab2a690..824adb3ad 100644
--- a/src/components/tabs-pane/index.scss
+++ b/src/components/tabs-pane/index.scss
@@ -3,4 +3,13 @@
   width: 100%;
   white-space: initial;
   vertical-align: top;
+
+  &--active {
+    height: auto;
+  }
+
+  &--inactive {
+    height: 0;
+    overflow: visible;
+  }
 }
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
index 606e39fb6..402463fb3 100644
--- a/src/components/tabs/index.js
+++ b/src/components/tabs/index.js
@@ -95,7 +95,6 @@ class AtTabs extends AtComponent {
         }
       </View>
       <View className='at-tabs__body'
-        id='test'
         onTouchStart={this.handleTouchStart.bind(this)}
         onTouchEnd={this.handleTouchEnd.bind(this)}
         onTouchMove={this.handleTouchMove.bind(this)}
diff --git a/src/pages/navigation/tabs/index.js b/src/pages/navigation/tabs/index.js
index 7712fd097..c48ee5293 100644
--- a/src/pages/navigation/tabs/index.js
+++ b/src/pages/navigation/tabs/index.js
@@ -49,13 +49,13 @@ export default class Index extends Taro.Component {
             <View className='panel__title'>等宽标签栏</View>
             <View className='panel__content'>
               <AtTabs swipeable={false} current={current1} tabList={tabList1} onClick={this.handleClick.bind(this, 'current1')}>
-                <AtTabsPane>
+                <AtTabsPane current={current1} index={0} >
                   <View className='tab-content'>标签页一的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current1} index={1}>
                   <View className='tab-content'>标签页二的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current1} index={2}>
                   <View className='tab-content'>标签页三的内容</View>
                 </AtTabsPane>
               </AtTabs>
@@ -65,31 +65,31 @@ export default class Index extends Taro.Component {
             <View className='panel__title'>滚动标签栏</View>
             <View className='panel__content'>
               <AtTabs swipeable={false} scroll current={current2} tabList={tabList2} onClick={this.handleClick.bind(this, 'current2')}>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={0}>
                   <View className='tab-content'>标签页一的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={1}>
                   <View className='tab-content'>标签页二的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={2}>
                   <View className='tab-content'>标签页三的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={3}>
                   <View className='tab-content'>标签页四的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={4}>
                   <View className='tab-content'>标签页五的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={5}>
                   <View className='tab-content'>标签页六的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={6}>
                   <View className='tab-content'>标签页七的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={7}>
                   <View className='tab-content'>标签页八的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current2} index={8}>
                   <View className='tab-content'>标签页九的内容</View>
                 </AtTabsPane>
               </AtTabs>
@@ -99,13 +99,13 @@ export default class Index extends Taro.Component {
             <View className='panel__title'>滑动切换内容</View>
             <View className='panel__content'>
               <AtTabs current={current3} tabList={tabList1} onClick={this.handleClick.bind(this, 'current3')}>
-                <AtTabsPane>
+                <AtTabsPane current={current3} index={0}>
                   <View className='tab-content'>标签页一的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current3} index={1}>
                   <View className='tab-content'>标签页二的内容</View>
                 </AtTabsPane>
-                <AtTabsPane>
+                <AtTabsPane current={current3} index={2}>
                   <View className='tab-content'>标签页三的内容</View>
                 </AtTabsPane>
               </AtTabs>