# Tabs 标签选项卡 
该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动且自动居中。
该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
# 平台兼容性
| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
注意
1、该组件使用了scroll-view标签，H5等平台可能出现滚动条，需要全局设置滚动条样式，局部设置不生效，所以建议引入index.scss基础样式，请参考扩展配置-基础样式 (opens new window)
2、如果在弹窗等场景使用显示异常，需要使用v-if进行控制，详情请参考为什么部分组件在弹出层中显示异常或功能异常 (opens new window)
# 基本使用
- 通过设置
scrollable(默认为true)，配置tabs组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为false，5个标签以上，建议可以左右拖动。 - tabs标签的切换，需要绑定
current值，在change事件回调中可以得到index，将其赋值给current即可。
具体的标签，通过list参数配置，该参数要求为数组，元素为对象，对象要有name属性，见示例：
说明
scrollable参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置scrollable为false，因为它默认为true。这样设置后，整体会自动居中。
<template>
<uv-tabs :list="list" @click="click"></uv-tabs>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注',
}, {
name: '推荐',
}, {
name: '电影'
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
},
methods: {
click(item) {
console.log('item', item);
}
}
}
</script>
# 粘性布局
通过加上uv-sticky来使tabs滑动浮动在最顶部。
<template>
<uv-sticky bgColor="#fff">
<uv-tabs :list="list"></uv-tabs>
</uv-sticky>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注',
}, {
name: '推荐',
}, {
name: '电影'
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
}
}
</script>
# 显示徽标
可以通过在列表对象中加入badge来设置徽标。
<template>
<uv-tabs :list="list"></uv-tabs>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注'
}, {
name: '推荐',
badge: {
isDot: true
}
}, {
name: '电影',
badge: {
value: 5,
}
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
}
}
</script>
# 禁用
可以通过在列表对象中加入disabled = true来设置禁用。
<template>
<uv-tabs :list="list"></uv-tabs>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注',
disabled: true
}, {
name: '推荐',
badge: {
isDot: true
}
}, {
name: '电影',
badge: {
value: 5,
}
}, {
name: '科技',
disabled: true
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
}
}
</script>
# 自定义样式
通过使用activeStyle、inactiveStyle、itemStyle来设置tabs的样式。
<template>
<uv-tabs
:list="list"
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;"
></uv-tabs>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注'
}, {
name: '推荐',
badge: {
isDot: true
}
}, {
name: '电影',
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
}
}
</script>
# 滑块设置背景图
通过使用lineColor来设置滑块背景图。
<template>
<uv-tabs :list="list" :lineColor="`url(${lineBg}) 100% 100%`"></uv-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 {
list: [{
name: '关注'
}, {
name: '推荐',
badge: {
isDot: true
}
}, {
name: '电影',
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}],
lineBg: lineBg
}
}
}
</script>
# 右侧自定义插槽
<template>
<uv-tabs :list="list">
<template v-slot:right>
<view style="padding-left: 4px;" @tap="toast">
<uv-icon name="list" size="21" bold></uv-icon>
</view>
</template>
</uv-tabs>
</template>
<script>
export default {
data() {
return {
list: [{
name: '关注',
}, {
name: '推荐',
}, {
name: '电影'
}, {
name: '科技'
}, {
name: '音乐'
}, {
name: '美食'
}, {
name: '文化'
}, {
name: '财经'
}, {
name: '手工'
}]
}
},
methods: {
toast() {
uni.showToast({
icon: 'none',
title: '插槽被点击'
})
}
}
}
</script>
# 完整示例
# API
# 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 | 菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示 | Boolean | true | true | false |
| current | 当前选中标签的索引 | String | Number | 0 | - |
| keyName | 从list元素对象中读取的键名 | String | name | - |
| customStyle | 自定义样式 | Object | - | - |
# Tabs Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击标签时触发 | index: 标签索引值，item: 传入的其他值 |
| @change | 标签索引改变时触发(disalbed时不会触发) | index: 标签索引值，item: 传入的其他值 |