tui-segmented-control 分段器 会员组件

介绍

分段器，可用于选项卡切换，可自定义颜色。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiSegmentedControl from "@/components/thorui/tui-segmented-control/tui-segmented-control.vue"
export default {
	components:{
		tuiSegmentedControl
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
✓	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-segmented-control": "/components/thorui/tui-segmented-control/tui-segmented-control"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

默认使用

通过 values 属性设置分段器数据。

<!--uni-app-->
<tui-segmented-control :values="values" @click="change"></tui-segmented-control>

<!--微信小程序-->
<tui-segmented-control values="{{values}}" bindclick="change"></tui-segmented-control>

values: ['Segment1', 'Segment2']

自定义颜色

通过 activeColor 属性设置分段器颜色。

<!--uni-app-->
<tui-segmented-control :values="values" activeColor="#07c160" @click="change"></tui-segmented-control>

<!--微信小程序-->
<tui-segmented-control values="{{values}}" activeColor="#07c160" bindclick="change"></tui-segmented-control>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值
values	Array	分段器菜单数据，字符串数组	[ ]
current	Number	初始化当前选中项	0
activeColor	String	分段器颜色	#5677fc
height	String	分段器高度	56rpx
size	String	分段器字体大小	28rpx
radius	String	分段器圆角大小	4px
disabled	Boolean	是否禁用	false

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	分段器item点击时触发	{index:item索引}

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码