fix: #32 tab 高度问题

jd-opensource · Aug 30, 2018 · 7f62879 · 7f62879
1 parent c68b842
commit 7f62879
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>