Tabs 标签

17:06

说明

标签页组件，通过 list 渲染标签，内置底部滑块与角标。is-scroll（默认 true）为滚动模式：标签可左右滑动、激活项自动滚动到可视区中间；设为 false 则标签均分宽度、不可滑动。点击标签触发 change，由外部更新 current 控制激活项。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

默认可滚动，激活 tab 自动居中，点击触发 change 事件。

查看源码

<template>
    <ux-tabs :list="list" :current="current" @change="onChange" />
</template>

<script setup lang="uts">
import type { TabsItem } from '@/uni_modules/uview-pro-x';

const current = ref<number>(0);

const list: TabsItem[] = [
    { name: '标签一' },
    { name: '标签二' },
    { name: '标签三' },
    { name: '标签四' },
    { name: '标签五' }
];

const onChange = (index: number) => {
    current.value = index;
};
</script>

禁止滚动 is-scroll

is-scroll=false 时标签均分宽度，左右不可滑动。

查看源码

<template>
    <ux-tabs :list="list" :is-scroll="false" :current="current" @change="onChange" />
</template>

<script setup lang="uts">
import type { TabsItem } from '@/uni_modules/uview-pro-x';

const current = ref<number>(0);

const list: TabsItem[] = [
    { name: '标签一' },
    { name: '标签二' },
    { name: '标签三' }
];

const onChange = (index: number) => {
    current.value = index;
};
</script>

自定义颜色

通过 active-color / inactive-color 自定义激活与未激活文字颜色。

查看源码

<template>
    <ux-tabs :list="list" active-color="#ffa500" inactive-color="#909399" :current="current" @change="onChange" />
</template>

<script setup lang="uts">
import type { TabsItem } from '@/uni_modules/uview-pro-x';

const current = ref<number>(0);

const list: TabsItem[] = [
    { name: '标签一' },
    { name: '标签二' },
    { name: '标签三' }
];

const onChange = (index: number) => {
    current.value = index;
};
</script>

徽标

list 数据中的 count 字段配合徽标显示，is-dot 可切换为圆点。

查看源码

<template>
    <ux-tabs :list="list" :is-scroll="false" :current="current" @change="onChange" />
</template>

<script setup lang="uts">
import type { TabsItem } from '@/uni_modules/uview-pro-x';

const current = ref<number>(0);

const list: TabsItem[] = [
    { name: '标签一', count: 5 },
    { name: '标签二', count: 20 },
    { name: '标签三', count: 100 },
    { name: '标签四' }
];

const onChange = (index: number) => {
    current.value = index;
};
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
isScroll	tabs 是否可左右拖动	boolean	true	-
list	标签数组	TabsItem[]	-	-
current	当前活动 tab 的索引	string | number	0	-
height	导航栏的高度和行高	string | number	40	-
fontSize	字体大小，单位px	string | number	15	-
duration	过渡动画时长，单位s	string | number	0.5	-
activeColor	选中项的主题颜色	string	''	-
inactiveColor	未选中项的颜色	string	''	-
barWidth	菜单底部移动 bar 的宽度，单位px	string | number	20	-
barHeight	移动 bar 的高度，单位px	string | number	3	-
gutter	单个 tab 的左右内边距之和，单位px	string | number	20	-
bgColor	导航栏的背景颜色	string	''	-
name	读取传入的数组对象的属性（tab名称）	string	'name'	-
count	读取传入的数组对象的属性（徽标数）	string	'count'	-
offset	徽标数位置偏移	number[]	-	-
isDot	徽标是否是圆点	boolean	false	-
bold	活动 tab 字体是否加粗	boolean	true	-
activeItemStyle	当前活动 tab item 的样式	UTSJSONObject	-	-
showBar	是否显示底部的滑块	boolean	true	-
barStyle	底部滑块的自定义样式	UTSJSONObject	-	-
itemWidth	标签的宽度	string | number	'auto'	-

Events

事件名	说明	回调参数	版本
change	点击标签时触发，参数：index（点击的标签索引）	index: number	-

Slots

ux-tabs 无插槽。

注意事项

• 点击已激活的标签不会再次触发 change（源码在索引相同时直接返回）。
• current 由外部维护（组件内部不自增），需在 change 回调里更新。
• list 长度变化时组件会把当前索引重置为 0。
• 角标由 list 项的 count 驱动，count 为 0 或不传时不显示；is-dot 显示为圆点。
• 滚动模式（is-scroll=true）下 gutter 生效为标签左右内边距；非滚动模式标签均分宽度，item-width 保持 auto。
• duration 单位为秒；滑块首次出现不做动画。