feat(tabs): 增加动画

jd-opensource · Aug 6, 2018 · fa7a9c2 · fa7a9c2
1 parent 868dd6b
commit fa7a9c2
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 31 deletions.
diff --git a/src/components/tabs-pane/index.js b/src/components/tabs-pane/index.js
@@ -0,0 +1,22 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './index.scss'
+
+/**
+ * @author:chenzeji
+ * @description tabs 标签页
+ * @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 Taro.Component {
+  render () {
+    return <View className='tabs-pane'>
+      {this.props.children}
+    </View>
+  }
+}
+
+export default AtTabsPane
diff --git a/src/components/tabs-pane/index.scss b/src/components/tabs-pane/index.scss
@@ -0,0 +1,6 @@
+.tabs-pane {
+  display: inline-block;
+  width: 100%;
+  white-space: initial;
+  vertical-align: top;
+}
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
@@ -19,17 +19,23 @@ class AtTabs extends Taro.Component {
 
   render () {
     const { tabList, scroll, current, color } = this.props
-    const rootCls = ['at-tabs']
+    const headerCls = ['at-tabs__header']
     const style = `color: ${color};border-bottom: 1px solid ${color};`
     if (scroll) {
-      rootCls.push('at-tabs--scroll')
+      headerCls.push('at-tabs__header--scroll')
     }
-    return <View className={rootCls}>
-      {
-        tabList.map((item, i) => <View className='at-tabs__item' style={current === i ? style : ''} key={item} onClick={this.handleClick.bind(this, i)}>
-          {item.title}
-        </View>)
-      }
+    const animationStyle = `transform: translate3d(-${current * 100}%, 0px, 0px);`
+    return <View className='at-tabs'>
+      <View className={headerCls}>
+        {
+          tabList.map((item, i) => <View className='at-tabs__item' style={current === i ? style : ''} key={item} onClick={this.handleClick.bind(this, i)}>
+            {item.title}
+          </View>)
+        }
+      </View>
+      <View className='at-tabs__body' style={animationStyle}>
+        {this.props.children}
+      </View>
     </View>
   }
 }

diff --git a/src/components/tabs/index.scss b/src/components/tabs/index.scss
@@ -2,26 +2,35 @@
 @import '../../style/theme/default.scss';
 
 .at-tabs {
-  background-color: $color-bg;
-  display: flex;
-  text-align: center;
-  width: 100%;
-  box-sizing: border-box;
-  white-space: nowrap;
-
   &__item {
     flex: 1;
     font-size: 30px;
     padding: 20px;
     color: $color-text-base;
   }
 
-  &--scroll {
-    overflow-x: auto;
+  &__header {
+    background-color: $color-bg;
+    display: flex;
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
     white-space: nowrap;
 
-    .at-tabs__item {
-      display: inline-block;
+    &--scroll {
+      overflow-x: auto;
+      white-space: nowrap;
+
+      .at-tabs__item {
+        display: inline-block;
+      }
     }
   }
+
+  &__body {
+    display: block;
+    font-size: 0;
+    white-space: nowrap;
+    transition: all 0.3s;
+  }
 }
diff --git a/src/pages/navigation/tabs/index.js b/src/pages/navigation/tabs/index.js
@@ -2,6 +2,7 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import AtTabs from '../../../components/tabs/index'
+import AtTabsPane from '../../../components/tabs-pane/index'
 import DocsHeader from '../../components/doc-header'
 import './index.scss'
 
@@ -43,20 +44,16 @@ export default class Index extends Taro.Component {
           <View className='panel'>
             <View className='panel__title'>基础用法</View>
             <View className='panel__content'>
-              <AtTabs current={current1} tabList={tabList1} onClick={this.handleClick.bind(this, 'current1')} />
-              {
-                current1 === 0
-                  ? <View className='tab-content'>标签页一的内容</View>
-                  : null
-              }
-              {
-                current1 === 1
-                  ? <View className='tab-content'>标签页二的内容</View>
-                  : null
-              }
+              <AtTabs current={current1} tabList={tabList1} onClick={this.handleClick.bind(this, 'current1')}>
+                <AtTabsPane>
+                  <View className='tab-content'>标签页一的内容</View>
+                </AtTabsPane>
+                <AtTabsPane>
+                  <View className='tab-content'>标签页二的内容</View>
+                </AtTabsPane>
+              </AtTabs>
             </View>
           </View>
-
           {/* 滚动 */}
           <View className='panel'>
             <View className='panel__title'>滚动</View>