uView Next
4.0.105

外观

Segmented 分段器

约 1710 字大约 6 分钟

2025-10-31

分段器组件，一般用于用户从几个选项中选择某一个的场景，支持多种样式和自定义配置。

基本使用

通过 v-model 双向绑定一个变量值，设置当前选中的索引。使用 un-segmented-item 组件添加选项。

<template>
	<un-page>
		<un-segmented v-model="current1">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current1 = ref(0);
</script>

设置形状

通过 shape 设置分段器的形状，square-方形带圆角，circle-圆形

<template>
	<un-page>
		<un-segmented shape="circle" v-model="current1">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current1 = ref(0);
</script>

卡片样式

通过 type="card" 设置为卡片样式，配合 shape 可以实现不同形状的卡片效果

<template>
	<un-page>
		<un-segmented type="card" v-model="current1">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
		<view style="margin-bottom: 10px;"></view>
		<un-segmented shape="circle" type="card" v-model="current1">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current1 = ref(0);
</script>

文字样式

通过 type="text" 设置为文字样式，仅显示底部指示条

<template>
	<un-page>
		<un-segmented type="text" v-model="current1">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current1 = ref(0);
</script>

禁用状态

通过 disabled 属性设置整个分段器为禁用状态，或者单独禁用某个选项

<template>
	<un-page>
		<un-segmented disabled v-model="current3">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
		<view style="margin-bottom: 10px;"></view>
		<un-segmented disabled type="card" shape="circle" v-model="current3">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
		<view style="margin-bottom: 10px;"></view>
		<un-segmented type="text" v-model="current3">
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item disabled text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current3 = ref(0);
</script>

自定义样式

通过 activeColor、barColor、bgColor 等属性自定义分段器的颜色样式

<template>
	<un-page>
		<un-segmented 
			v-model="current1" 
			barColor="#fa3534" 
			activeColor="#ffffff"
		>
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>

		<view style="margin-bottom: 10px;"></view>
		<un-segmented
			v-model="current1" 
			type="card" 
			shape="circle" 
			color="#ffffff"
			activeColor="#ff9900"
			bgColor="#ff9900"
		>
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
		<view style="margin-bottom: 10px;"></view>
		<un-segmented 
			v-model="current1" 
			type="text" 
			barColor="#fa3534" 
			activeColor="#fa3534"
		>
			<un-segmented-item text="未付款"></un-segmented-item>
			<un-segmented-item text="待评价"></un-segmented-item>
			<un-segmented-item text="已付款"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current1 = ref(0);
</script>

使用插槽

可以通过插槽自定义每个选项的内容，实现更丰富的展示效果

<template>
	<un-page>
		<un-segmented v-model="current4" type="card">
			<un-segmented-item v-for="(item, index) in options" :key="index">
				<view style="padding: 10px 0">
					<un-avatar :src="item.avatar" size="34"></un-avatar>
					<text style="font-size: 14px;margin-top: 5px;">{{ item.name }}</text>
				</view>
			</un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current4 = ref(1);

type Option = {
	name: string,
	avatar: string
}

const options = ref<Option[]>([	
	{
		name: '王者',
		avatar: 'https://pic.qqans.com/up/2023-6/2023615923363981.jpg'
	}, 
	{
		name: '青铜',
		avatar: 'https://pic.qqans.com/up/2023-7/202376745468967.jpg'
	}, 
	{
		name: '白银',
		avatar: 'https://pic.qqans.com/up/2023-7/202376745468967.jpg'
	}, 
	{
		name: '黄金',
		avatar: 'https://pic.qqans.com/up/2023-8/202381072034402.jpg'
	}
]);
</script>

受控模式

通过 value 属性和 change 事件实现受控模式，可以在切换时执行异步操作

<template>
	<un-page>
		<un-segmented :value="current5" type="card" @change="change5">
			<un-segmented-item v-for="(item, index) in options" :key="index" :text="item.name"></un-segmented-item>
		</un-segmented>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const current5 = ref(0);

type Option = {
	name: string,
	avatar: string
}

const options = ref<Option[]>([	
	{
		name: '王者',
		avatar: 'https://pic.qqans.com/up/2023-6/2023615923363981.jpg'
	}, 
	{
		name: '青铜',
		avatar: 'https://pic.qqans.com/up/2023-7/202376745468967.jpg'
	}, 
	{
		name: '白银',
		avatar: 'https://pic.qqans.com/up/2023-7/202376745468967.jpg'
	}, 
	{
		name: '黄金',
		avatar: 'https://pic.qqans.com/up/2023-8/202381072034402.jpg'
	}
]);

const change5 = (index: number) => {
	uni.showLoading({
		title: '加载中...'
	});
	setTimeout(() => {
		current5.value = index;
		uni.hideLoading();
	}, 1000);
};
</script>

监听事件

change 事件

当用户切换选项时触发 change 事件，可以获取当前选中的索引值：

<template>
	<view>
		<un-segmented 
			v-model="currentIndex" 
			@change="onSegmentChange"
		>
			<un-segmented-item text="选项一"></un-segmented-item>
			<un-segmented-item text="选项二"></un-segmented-item>
			<un-segmented-item text="选项三"></un-segmented-item>
		</un-segmented>
		<text class="result-text">当前选中：{{ currentIndex }}</text>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const currentIndex = ref<number>(0)

const onSegmentChange = (index: number) => {
	console.log('切换到选项:', index)
	// 可以在这里处理切换逻辑
}
</script>

<style>
.result-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}
</style>

API

Segmented Props

参数说明类型默认值
v-model / value当前选中的索引值Number0
modelValue当前选中的索引值(v-model)Number-
shape分段器形状
Enum
square
type分段器类型
Enum
button
fontSize字体大小，单位pxString | Number12
bold激活选项的字体是否加粗Booleantrue
color文字颜色String-
activeColor激活时的颜色String-
bgColor组件背景颜色，type为button时有效String-
barColor指示条/滑块颜色String-
height分段器高度String | Number-
disabled是否禁用Booleanfalse
immediate是否跳过首次动画Booleantrue
customStyle自定义样式String | Object''

SegmentedItem Props

参数说明类型默认值
text选项文本String-
disabled是否禁用当前选项Booleanfalse

Events

事件名说明类型
change分段器选项发生改变时触发
Function
update:modelValuev-model更新时触发
Function

Slot

名称说明
default自定义每个选项的内容，可通过作用域插槽获取index参数

Scss 变量

变量名默认值说明
$un-segmented-min-height36px分段器最小高度
$un-segmented-bar-bg-color#ffffff滑块背景色
$un-segmented-button-border-width1px按钮类型边框宽度
$un-segmented-card-padding4px卡片类型内边距
$un-segmented-card-bg-colorrgb(238, 238, 239)卡片类型背景色
$un-segmented-text-bar-border-width2px文字类型指示条宽度
$un-segmented-disabled-opacity0.5禁用状态透明度
$un-segmented-button-bar-bg-color$color-primary按钮类型滑块背景色
$un-segmented-item-text-font-size12px选项文字大小
$un-segmented-item-active-font-weight700激活选项文字粗细
$un-segmented-item-disabled-opacity0.5选项禁用状态透明度
$un-segmented-button-item-border1px solid $color-primary按钮类型选项边框
$un-segmented-button-active-text-color#fff按钮类型激活文字颜色

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

Copyright © 2026 uView Next