qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

SegmentedControl 分段器

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

使用指南

在 Taro 文件中引入组件

import { AtSegmentedControl } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/segmented-control.scss";

一般用法

说明：

  • 该组件为受控组件，开发者需要通过 onClick 事件来更新 current 值变化，current 与 onClick 函数必填
<template>
  <view>
    <AtSegmentedControl
      @click="handleClick"
      :current="current1"
      :values="tabList2"
    />
    <view class='tab-content'>标签 {{ current1 + 1 }} 的内容</view>
  </view>
</template>
<script>
export default {
  name: 'AtSegmentedControlDemo',
  data() {
    return {
      current1: 0,
      tabList2: ['标签页1', '标签页2', '标签页3'],
    }
  },
  methods: {
    handleClick(value) {
      this.current1 = value
    }
  }
}
</script>

自定义颜色、字体大小

<AtSegmentedControl
  @click="handleClick"
  selectedColor='#FF4949'
  fontSize='30'
  :current="current"
  :values="['标签页1', '标签页2', '标签页3']"
/>

禁用

<AtSegmentedControl
  disabled
  :values="['标签页1', '标签页2', '标签页3']"
  @click="handleClick"
  :current="current"
/>

参数

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

事件

事件名称说明返回参数
onClick点击触发事件，开发者需要通过 onClick 事件来更新 current 值变化，onClick 函数必填选中 tab 列表索引值