• SegmentedControl 分段器
    • 使用指南
    • 一般用法
    • 自定义颜色、字体大小
    • 禁用
    • 参数
    • 事件

    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 列表索引值