分段切换

组件介绍

ux-segmented-control 分段切换组件适用于分类切换、状态切换等场景，您也可以把它当成 switch 组件来使用。

运行图示

组件属性

属性名称	类型	默认值	作用
items	Array	string[]	切换项目数据
current	Number	0	当前选择项目的索引
borderRadius	String	6rpx	组件圆角设置
customStyle	String	''	组件外层行业样式
customClass	Array	['ux-bg-white', 'ux-padding-small']	组件外层自定义样式
itemClass	Array	[]	组件项目自定义样式
itemColor	String	#353535	项目默认文本颜色
activeColor	String	#FFFFFF	激活项目文本颜色
activeBGColor	String	#FF0036	激活项目背景颜色

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">默认属性</text>
		<view class="ux-mt-small">
			<ux-segmented-control 
			:items="items" 
			@change="change"></ux-segmented-control>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">属性调整</text>
		<view class="ux-mt-small">
			<ux-segmented-control 
			:items="items" 
			:current="1" 
			borderRadius="50rpx" 
			activeBGColor="#FF0036" 
			customStyle="border-radius:50rpx;" 
			@change="change"></ux-segmented-control>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			items : ["One", "Two", "Three", "Four"] as string[]
		}
	},
	methods: {
		change : function(index:number){
			console.log(index);
		}
	}
}
</script>
<style scoped>
</style>