该组件,是一个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
#粘性布局
通过加上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
#显示徽标
可以通过在列表对象中加入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
#禁用
可以通过在列表对象中加入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
#自定义样式
通过使用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
#滑块设置背景图 2.0.30
通过使用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
#右侧自定义插槽
<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>