uView Next

# Tabs 标签 3.2.1

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 通过设置scrollable(默认为true)，配置tabs组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为false，5个标签以上，建议可以左右拖动。
  • tabs标签的切换，需要绑定current值，在change事件回调中可以得到index，将其赋值给current即可。

具体的标签，通过list参数配置，该参数要求为数组，元素为对象，对象要有name属性，见示例：

说明

scrollable参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置scrollable为false，因为它默认为true。

<template>
    <u-tabs :list="list1" @click="click"></u-tabs>
</template>

<script>
	export default {
		data() {
			return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
			}
		},
		methods: {
            click(item) {
                console.log('item', item);
            }
		}
	}
</script>

✅ Copy success!

# 子组件方式定义

除了通过 list 属性配置标签数组外，您还可以使用子组件的方式来定义每个标签页的内容。这种方式更加灵活，可以在每个标签页中嵌入复杂的内容。

<template>
    <u-tabs @change="onChange">
        <u-tabs-item label="首页">
            <view style="padding: 20px;">
                <text>首页内容</text>
            </view>
        </u-tabs-item>
        <u-tabs-item label="分类">
            <view style="padding: 20px;">
                <text>分类内容</text>
            </view>
        </u-tabs-item>
        <u-tabs-item label="购物车" badge="5">
            <view style="padding: 20px;">
                <text>购物车内容</text>
            </view>
        </u-tabs-item>
        <u-tabs-item label="我的" dot>
            <view style="padding: 20px;">
                <text>我的页面内容</text>
            </view>
        </u-tabs-item>
    </u-tabs>
</template>

<script>
    export default {
        methods: {
            onChange(e) {
               
            }
        }
    }
</script>

✅ Copy success!

# 子组件方式的禁用状态

在子组件方式中，您可以通过设置 disabled 属性来禁用某个标签：

<template>
    <u-tabs @change="onChange">
        <u-tabs-item label="可用标签">
            <view>
                <text>这是一个可用的标签</text>
            </view>
        </u-tabs-item>
        <u-tabs-item label="禁用标签" disabled>
            <view>
                <text>这个标签被禁用了</text>
            </view>
        </u-tabs-item>
        <u-tabs-item label="另一个标签">
            <view>
                <text>另一个正常的标签</text>
            </view>
        </u-tabs-item>
    </u-tabs>
</template>

<script>
    export default {
       
        methods: {
            onChange(e) {
               
            }
        }
    }
</script>

✅ Copy success!

提示

  • 使用子组件方式时，无需设置 list 属性
  • 每个 u-tabs-item 的 label 属性用于显示标签文本
  • 支持 badge（徽标数值）、dot（圆点徽标）、disabled（禁用）等属性
  • 标签内容将只在对应标签激活时显示

# 粘性布局

通过加上u-sticky来使tabs滑动浮动在最顶部。

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

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

✅ Copy success!

# 显示徽标

可以通过在列表对象中加入badge来设置徽标。

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

<script>
    export default {
        data() {
            return {
                list2: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                    badge: {
                        value: 5,
                    }
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>

✅ Copy success!

# 禁用

可以通过在列表对象中加入disabled = true来设置禁用。

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

<script>
    export default {
        data() {
            return {
                list2: [{
                    name: '关注',
                    disabled: true
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                    badge: {
                        value: 5,
                    }
                }, {
                    name: '科技',
                    disabled: true
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>

✅ Copy success!

# 自定义样式

通过使用activeStyle、inactiveStyle、itemStyle来设置tabs的样式。

<template>
    <u-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;"
    >
    </u-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list4: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
            }
        }
    }
</script>

✅ Copy success!

# 滑块设置背景图

通过使用lineColor来设置滑块背景图。

<template>
    <u-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;"
    >
    </u-tabs>
</template>

<script>
  const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=";
  export default {
        data() {
            return {
                list4: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
            }
        }
    }
</script>

✅ Copy success!

# 右侧自定义插槽

<template>
    <u-tabs :list="list1">
        <view
                slot="right"
                style="padding-left: 4px;"
                @tap="$u.toast('插槽被点击')"
        >
            <u-icon
                    name="list"
                    size="21"
                    bold
            ></u-icon>
        </view>
    </u-tabs>
</template>

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

✅ Copy success!

# 此页面源代码地址

页面源码地址


 github  gitee

# API

# u-tabs Props

参数 说明 类型 默认值 可选值
duration 滑块移动一次所需的时间，单位ms String | Number 300 -
list 标签数组，元素为对象，如[{name: '推荐'}] Array - -
lineColor 滑块颜色 String #3c9cff -
activeStyle 菜单选择中时的样式 String | Object { color: '#303133' } -
inactiveStyle 菜单非选中时的样式 String | Object { color: '#606266' } -
lineWidth 滑块长度 String | Number 20 -
lineHeight 滑块高度 String | Number 3 -
lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用 String cover -
itemStyle 菜单item的样式 String | Object { height: '44px' } -
scrollable 菜单是否可滚动 Boolean true false
current 当前选中标签的索引 String | Number 0 -
keyName 从list元素对象中读取的键名 String name -

# u-tabs Events

事件名 说明 回调参数 版本
click 点击标签时触发 index: 标签索引值，item: 传入的其他值 -
change 标签索引改变时触发(disabled时不会触发) index: 标签索引值，item: 传入的其他值 -
longPress 长按标签时触发 index: 标签索引值，item: 传入的其他值 -

# u-tabs-item Props

参数 说明 类型 默认值 可选值
label 标签显示的文本 String - -
disabled 是否禁用此标签 Boolean false true
badge 右上角的角标提示信息 String | Number - -
dot 是否显示圆点，将会覆盖badge参数 Boolean false true
customStyle 定义需要用到的外部样式 Object {} -

# u-tabs Slots

名称 说明
default 默认插槽，用于放置u-tabs-item子组件
left tabs左侧的插槽
right tabs右侧的插槽

← Section 查看更多 →

🌟 真诚邀请 🌟
如果你觉得本项目对你有帮助
欢迎访问我们的Gitee/Github 仓库为我们点个 Star！
点我去 Gitee 点我去 Github
×