uview-plus

# Tabs 标签

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

# 平台差异说明

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

# 基本使用

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

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

说明

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

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

<script setup>  
import { reactive } from 'vue';  
  
// 创建响应式数据  
const list1 = reactive([  
    { name: '关注' },  
    { name: '推荐' },  
    { name: '电影' },  
    { name: '科技' },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);  
  
// 定义方法  
function click(item) {  
    console.log('item', item);  
}  
</script>

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

# 粘性布局

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

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

<script setup>  
import { reactive } from 'vue';  
  
// 创建响应式数据  
const list1 = reactive([  
    { name: '关注' },  
    { name: '推荐' },  
    { name: '电影' },  
    { name: '科技' },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);
</script>

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

# 显示徽标

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

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

<script setup>  
import { reactive } from 'vue';  
  
// 创建响应式数据  
const list2 = reactive([  
    { name: '关注' },  
    { name: '推荐', badge: { isDot: true } },  
    { name: '电影', badge: { value: 5 } },  
    { name: '科技' },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);  
</script>

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

# 禁用

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

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

<script setup>  
import { reactive } from 'vue';  
  
// 创建响应式数据  
const list2 = reactive([  
    { name: '关注', disabled: true },  
    { name: '推荐', badge: { isDot: true } },  
    { name: '电影', badge: { value: 5 } },  
    { name: '科技', disabled: true },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);  
</script>

<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>

# 自定义样式

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

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

<script setup>  
import { ref, reactive } from 'vue';  
  
const list4 = reactive([  
    { name: '关注' },  
    { name: '推荐', badge: { isDot: true } },  
    { name: '电影' },  
    { name: '科技' },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);  
</script>

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

# 滑块设置背景图 2.0.30

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

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

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

<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>

# 右侧自定义插槽

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

<script setup>  
import { reactive } from 'vue';  
  
// 创建响应式数组  
const list1 = reactive([  
    { name: '关注' },  
    { name: '推荐' },  
    { name: '电影' },  
    { name: '科技' },  
    { name: '音乐' },  
    { name: '美食' },  
    { name: '文化' },  
    { name: '财经' },  
    { name: '手工' }  
]);  
</script>

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

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# 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 2.0.30 滑块背景显示大小，当滑块背景设置为图片时使用 String cover -
itemStyle 菜单item的样式 String | Object { height: '44px' } -
scrollable 菜单是否可滚动 Boolean true false
current 当前选中标签的索引 String | Number 0 -
keyName 从list元素对象中读取的键名 String name -

# Slot

slot中您可以内置任何您所需要的样式。

名称 说明
-(left) 整体左侧插槽
-(right) 整体右侧插槽
-(content) 自定义每个tab内容 scope={item, keyName, index}

# Events

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

← Subsection 分段器 →