SegmentedControl 分段器 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

由至少 2 个分段控件组成,用作不同视图的显示;是 iOS 的推荐组件。

规则

  • 和 Tabs 功能相似,尽可能避免一个页面中同时出现这两个组件。
  • 可以搭配 NavBar 一起使用,用于显示多个视图,分段数一般为 2 个。
  • 单独放置一行时,分段数最多为 5 个;文案需要精简,一般 2-4 个字。
  • 尽可能保持文案长度一致。

引入方式

数字生活小程序工程中,不需要 import,直接使用组件标签即可。

import {Segment} from '@21cnfe/vui'  
Vue.component('Segment', Segment)

代码演示

基本用法 values 为选项数组,selectedIndex 为选中项索引,onChange 为切换选项回调方法
<Segment :values="segments" @onChange="changeValue"></Segment>
禁用状态
<Segment :values="segments" disabled></Segment>
主色调 通过 tintColor 属性设置主色调
<Segment :values="segments" tintColor="#ff0000"></Segment>

API

属性 说明 类型 默认值
disabled 是否启用 Boolean false
selectedIndex 选中项在数组中的索引 Number 0
values 选项数组,值是字符串 Array []
tintColor 组件主色调 String #2DB7F5

Event

事件名称 说明 回调参数
onChange 回调函数 index:当前选中索引值,item:当前选中项
  1. 1. SegmentedControl 分段器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API
    5. 1.5. Event