该组件，是一个 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	当前选中标签的索引	number	0
duration	滑块的移动过渡时间，单位ms	number	300
height	高度	string | number	-
list	tabs标签数组	UnTabItem[]	[]
lineColor	滑块颜色	string	''
activeStyle	菜单选择中时的样式	string | object	''
inactiveStyle	菜单非选中时的样式	string | object	''
lineWidth	滑块长度	string | number	null
lineHeight	滑块高度	string | number	3
lineBgSize	滑块背景显示大小，当滑块背景设置为图片时使用	string	cover
showLine	是否显示滑块	boolean	true
itemStyle	菜单item的样式	string | object	''
scrollable	菜单是否可滚动	boolean	true
immediate	是否跳过首次动画	boolean	true

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; // 点击的标签项数据
};