feat(segmented-control): 新增组件

src/app.js

@@ -29,7 +29,8 @@ class App extends Component {
       'pages/navigation/timeline/index',
       'pages/navigation/drawer/index',
       'pages/navigation/tabs/index',
-      'pages/navigation/tab-bar/index'
+      'pages/navigation/tab-bar/index',
+      'pages/navigation/segmented-control/index'
       // 'pages/layout/flex/index'
       // 'pages/layout/grid/index',
       // 'pages/layout/float-layout/index',

src/components/segmented-control/index.js

@@ -0,0 +1,64 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import './index.scss'
+
+/**
+ * @author:chenzeji
+ * @description segmented control 分段器组件
+ * @prop current {Number} 当前选中的tab index值，从0计数，default:0
+ * @prop color {String} 背景颜色与选中标签字体的颜色，default:#fff
+ * @prop selectedColor {String} 选中的标签背景色与边框颜色，default:#6190E8
+ * @prop tabList {Array} tab 列表 eg: [{ title: '标签页1' }, { title: '标签页2' }]
+ * @prop disabled {Boolean} 是否禁止点击 default:false
+ * @prop fontSize {String|Number} 字体大小,目前单位是px,等taro支持单位转化再修改 default:'14'
+ * @prop onClick {Function} 点击时触发事件，回调参数 {value: 1}
+ */
+class AtSegmentedControl extends Taro.Component {
+  handleClick (i, disable) {
+    if (disable) return
+    this.props.onClick({ value: i })
+  }
+
+  render () {
+    const { disabled, tabList, selectedColor, current, color, fontSize } = this.props
+    const rootStyle = `border-color: ${selectedColor};`
+    const itemStyle = `
+      color: ${selectedColor};
+      background-color:${color};
+      border-color: ${selectedColor};
+      font-size: ${fontSize}px;
+    `
+    const selectedItemStyle = `
+      color: ${color};
+      background-color:${selectedColor};
+      border-color: ${selectedColor};
+      font-size: ${fontSize}px;
+    `
+    return <View className={disabled ? 'at-segmented-control at-segmented-control--disabled' : 'at-segmented-control'} style={rootStyle}>
+      {
+        tabList.map((item, i) => <View className='at-segmented-control__item' style={current === i ? selectedItemStyle : itemStyle} key={item} onClick={this.handleClick.bind(this, i, disabled)}>
+          {item.title}
+        </View>)
+      }
+    </View>
+  }
+}
+AtSegmentedControl.defaultProps = {
+  current: 0,
+  color: '#fff',
+  fontSize: '14',
+  disabled: false,
+  selectedColor: '#6190E8',
+  tabList: [],
+  onClick: () => { }
+}
+AtSegmentedControl.propTypes = {
+  current: PropTypes.number,
+  color: PropTypes.string,
+  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  tabList: PropTypes.array,
+  onClick: PropTypes.func
+}
+export default AtSegmentedControl

src/components/segmented-control/index.scss

@@ -0,0 +1,28 @@
+@import '../../style/mixins/index.scss';
+@import '../../style/theme/default.scss';
+
+.at-segmented-control {
+  display: flex;
+  text-align: center;
+  width: 100%;
+  border-radius: 15px;
+  border: 2px solid #6190E8;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &__item {
+    flex: 1;
+    font-size: 30px;
+    padding: 10px;
+    color: $color-text-base;
+
+    + .at-segmented-control__item {
+      border-left: 2px solid #6190E8;
+    }
+  }
+
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+}

src/pages/index/index.js

@@ -175,6 +175,10 @@ export default class Index extends Taro.Component {
             {
               title: '标签栏',
               name: 'Tab-Bar'
+            },
+            {
+              title: '分段器',
+              name: 'Segmented-Control'
             }
           ]
         }

src/pages/navigation/segmented-control/index.js

@@ -0,0 +1,40 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import AtSegmentedControl from '../../../components/segmented-control/index'
+import './index.scss'
+
+export default class Index extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'segmented-control 分段器示例'
+  }
+  constructor () {
+    super(...arguments)
+    this.state = {
+      current: 0,
+    }
+  }
+  handleClick (detail) {
+    this.setState({
+      current: detail.value
+    })
+  }
+  render () {
+    const { current } = this.state
+    return (
+      <View className='example__body'>
+        <View className='item'>
+          <AtSegmentedControl disabled tabList={[{ title: '标签页1', dot: true }, { title: '标签页2', count: 8 }]} />
+        </View>
+        <View className='item'>
+          <AtSegmentedControl onClick={this.handleClick.bind(this)} selectedColor='#6190E8' current={current} tabList={[{ title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }]} />
+          {current === 0 ? <View className='tab-content'>标签1的内容</View> : null}
+          {current === 1 ? <View className='tab-content'>标签2的内容</View> : null}
+          {current === 2 ? <View className='tab-content'>标签3的内容</View> : null}
+        </View>
+        <View className='item'>
+          <AtSegmentedControl onClick={this.handleClick.bind(this)} selectedColor='#FF4949' fontSize='12' current={current} tabList={[{ title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }, { title: '标签页4' }]} />
+        </View>
+      </View>
+    )
+  }
+}

src/pages/navigation/segmented-control/index.scss

@@ -0,0 +1,17 @@
+.example__body {
+  background-color: #f8f8f8;
+  min-height: 100px;
+  padding: 30px 10px;
+
+  .item {
+    margin-bottom: 10px;
+  }
+
+  .tab-content {
+    font-size: 25px;
+    padding: 20px;
+    text-align: center;
+    border-top: 2px solid #f8f8f8;
+    background-color: #fff;
+  }
+}