uView Next
4.0.105

外观

Tabs 标签

约 1438 字大约 5 分钟

2025-10-31

该组件，是一个 tabs 标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的 tab 会自动移动到组件的中间位置。

基础演示

以下是一个基础的 tabs 标签组件使用示例：

<template>
	<un-tabs :list="list1" @click="click" :value="0"></un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItemClickEvent, UnTabItem } from '@/uni_modules/uview-unix'

const list1 = ref<UnTabItem[]>([{
		name: '关注',
	}, {
		name: '推荐',
	}, {
		name: '电影'
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}]
)

const click = (item: UnTabItemClickEvent) => {
	console.log('item', item);
}
</script>

粘性布局

可以将 tabs 组件与 sticky 组件结合使用，实现粘性布局效果：

<template>
	<un-sticky bgColor="#fff" :scrollTop="scrollTop">
		<un-tabs :list="list1"></un-tabs>
	</un-sticky>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//#ifndef UNI-APP-X
import { onPageScroll } from '@dcloudio/uni-app'
// #endif
import { UnTabItem } from '@/uni_modules/uview-unix'

const list1 = ref<UnTabItem[]>([{
		name: '关注',
	}, {
		name: '推荐',
	}, {
		name: '电影'
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}]
)

const scrollTop = ref(0);

onPageScroll((e: OnPageScrollOptions) => {
	scrollTop.value = e.scrollTop;
});
</script>

显示徽标

可以为 tabs 标签添加徽标或红点提示，支持动态设置徽标：

<template>
	<un-tabs :list="list2"></un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const list2 = ref<UnTabItem[]>([{
	name: '关注'
}, {
	name: '推荐',
	dot: true
}, {
	name: '电影',
	badge: 6
}, {
	name: '科技'
}, {
	name: '音乐'
}, {
	name: '美食'
}, {
	name: '文化'
}, {
	name: '财经'
}, {
	name: '手工'
}])


setTimeout(() => {
	list2.value[4].badge = 3
},2000)
</script>

禁止滚动

当标签数量较少时，可以禁止标签滚动：

<template>
	<un-tabs :list="list6" :scrollable="false"></un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const list6 = ref<UnTabItem[]>([
	{
		name: '关注'
	}, {
		name: '推荐',
	}, {
		name: '电影',
	}, {
		name: '科技'
	}
])
</script>

禁用菜单

可以禁用某些标签项，禁用后的标签项不会响应点击事件：

<template>
	<un-tabs :list="list3"></un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const list3 = ref<UnTabItem[]>([{
		name: '关注'
	}, {
		name: '推荐',
	}, {
		name: '电影',
		disabled: true
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}])
</script>

自定义样式

可以自定义标签的样式，包括激活状态和非激活状态的样式：

<template>
	<un-tabs :list="list4" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}" :inactiveStyle="{
			color: '#606266',
			transform: 'scale(1)'
		}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
	</un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const list4 = ref<UnTabItem[]>([{
		name: '关注'
	}, {
		name: '推荐',
		dot: true
	}, {
		name: '电影',
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}])
</script>

滑块设置背景图

可以为滑块设置背景图片，实现个性化效果：

<template>
	<un-tabs :list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`"
		:activeStyle="{
			color: '#303133',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
		}" :inactiveStyle="{
			color: '#606266',
			transform: 'scale(1)'
		}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
	</un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=";

const list4 = ref<UnTabItem[]>([{
		name: '关注'
	}, {
		name: '推荐',
		dot: true
	}, {
		name: '电影',
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}])
</script>

右侧自定义插槽

可以在 tabs 组件的右侧添加自定义内容：

<template>
	<un-tabs :list="list1">
		<template #right>
			<view >
				<un-icon name="list" size="21" bold></un-icon>
			</view>
		</template>
	</un-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UnTabItem } from '@/uni_modules/uview-unix'

const list1 = ref<UnTabItem[]>([{
		name: '关注',
	}, {
		name: '推荐',
	}, {
		name: '电影'
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}]
)
</script>

API

un-tabs Props

参数说明类型默认值
value当前选中标签的索引number0
duration滑块的移动过渡时间，单位msnumber300
height高度string | number-
listtabs标签数组UnTabItem[][]
lineColor滑块颜色string''
activeStyle菜单选择中时的样式string | object''
inactiveStyle菜单非选中时的样式string | object''
lineWidth滑块长度string | numbernull
lineHeight滑块高度string | number3
lineBgSize滑块背景显示大小，当滑块背景设置为图片时使用stringcover
showLine是否显示滑块booleantrue
itemStyle菜单item的样式string | object''
scrollable菜单是否可滚动booleantrue
immediate是否跳过首次动画booleantrue

un-tabs Events

事件名说明回调参数
click点击标签时触发
Function
change标签索引改变时触发(disabled时不会触发)
Function
longPress长按标签时触发
Function

数据类型

/**
 * 标签项类型
 * 用于定义标签页中的单个标签选项
 */
type UnTabItem = {
	name: string; // 标签文本
	disabled?: boolean; // 是否禁用
	value?: number | string; // 标签值
	dot?: boolean; // 是否显示红点
	badge?: string | number; // 自定义徽章内容
	showZero?: boolean; // 是否显示零值徽章
	badgeType?: string; // 自定义徽章类型
	badgeBgColor?: string; // 自定义徽章背景颜色
	offset?: Array<number | string>; // 自定义徽章偏移量
};

/**
 * 标签项点击事件类型
 * 用于表示点击标签项时的事件参数
 */
type UnTabItemClickEvent = {
	index: number; // 点击的标签索引
	item: UnTabItem; // 点击的标签项数据
};

Scss 变量

变量名默认值说明
$un-tabs-item-height40px标签项高度
$un-tabs-item-padding0 15px标签项内边距
$un-tabs-item-font-size$text-base标签项字体大小
$un-tabs-item-color$text-color标签项文本颜色
$un-tabs-item-disabled-color$text-color-disabled禁用标签项文本颜色
$un-tabs-item-active-font-weightbold激活标签项字体粗细
$un-tabs-line-height3px滑块高度
$un-tabs-line-width20px滑块宽度
$un-tabs-line-bg-color$color-primary滑块背景颜色
$un-tabs-line-bottom2px滑块底部距离
$un-tabs-line-border-radius$radius-circle滑块圆角
$un-tabs-transition-duration300ms标签项过渡动画时长

提示

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

Copyright © 2026 uView Next