SegmentedControl 分段器


由至少 2 个分段控件组成,用作不同视图的显示,可自定义文字大小,配色。

使用指南

在 Taro 文件中引入组件

:::demo

  1. import { AtSegmentedControl } from 'taro-ui'

:::

一般用法

:::demo

  1. <AtSegmentedControl
  2. values={['标签页1', '标签页2', '标签页3']}
  3. onClick={this.handleClick}
  4. current={this.state.current}
  5. />
  6. {this.state.current === 0 ? <View className='tab-content'>标签1的内容</View> : null}
  7. {this.state.current === 1 ? <View className='tab-content'>标签2的内容</View> : null}
  8. {this.state.current === 2 ? <View className='tab-content'>标签3的内容</View> : null}

:::

自定义颜色、字体大小

:::demo

  1. <AtSegmentedControl
  2. onClick={this.handleClick}
  3. selectedColor='#FF4949'
  4. fontSize='30'
  5. current={current}
  6. values={['标签页1', '标签页2', '标签页3']}
  7. />

:::

禁用

:::demo

  1. <AtSegmentedControl
  2. disabled
  3. values={['标签页1', '标签页2', '标签页3']}
  4. onClick={this.handleClick}
  5. current={this.state.current}
  6. />

:::

参数

参数 说明 类型 可选值 默认值
current 当前选中的tab索引值,从0计数 Number - 0
color 背景颜色与选中标签字体的颜色 String - #fff
selectedColor 选中的标签背景色与边框颜色 String - #6190E8
values 选项数组,值是字符串,eg: [‘标签页1’, ‘标签页2’ ] Array - false
disabled 是否禁止点击 Boolean - false
fontSize 字体大小,单位 h5 为 rem,小程序为 rem Number - 28

事件

事件名称 说明 返回参数
onClick 点击触发事件 选中 tab 列表索引值