Question

tabs 标签 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

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

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

说明

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

<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待收货'
				}, {
					name: '待付款'
				}, {
					name: '待评价',
					count: 5
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

控制组件读取的数组元素属性名

某些情况下，数据可能是从后端获取的，list所需的数组中不一定会有name属性，比如可能为cate_name，如果这种情况还需一定要提供name属性 会导致用户需要循环一遍，把cate_name改成name，显然不人性的，所以uView给tabsSwiper组件提供了一个name参数，您可以设置其值为cate_name，组件内部会读取数组中的cate_name属性，而不是默认的name属性。

同理，在1.7.4版本中新增的count属性，您可以设置其值为cate_count，组件内部会读取数组中的cate_count属性，而不是默认的count属性。

<u-tabs name="cate_name" count="cate_count" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

<script>
	export default {
		data() {
			return {
				list: [{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
                    cate_count: 5
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

手动配置激活的标签

可以通过current控制tabs当前的第几个tab处于激活状态

<u-tabs ref="tabs" :list="list" current="2"></u-tabs>

控制tabs组件的宽度

有时候我们并不想让tabs组件占满整个屏幕的宽度，如果有此需求，可以给tabs外面嵌套一个view元素，控制这个view的宽度或者内外边距，view里面的tabs组件 宽度也会相应的发生变化。

<view style="width: 400rpx;">
	<u-tabs ref="tabs" :list="list" current="2"></u-tabs>
</view>

控制底部滑块的样式

1. 可以通过active-color控制颜色(同时为当前活动tab文字颜色和滑块的颜色)。
2. bar-width控制滑块的长度(rpx)。
3. bar-height控制滑块高度。

<u-tabs ref="tabs" :list="list" bar-height="6" bar-width="40" active-color="#2979ff"></u-tabs>

控制tabs组件的活动tab样式

1. 通过active-color和inactive-color控制tabs的激活和非激活颜色。
2. font-size为tabs文字大小。
3. current为初始化tabs的激活tab索引，默认为0。gutter为单个tab标签的左右内边距之和，即左右各占gutter的一半。

<u-tabs ref="tabs" :list="list" active-color="#2979ff" inactive-color="#606266" font-size="30" :current="current"></u-tabs>

API

Props

参数	说明	类型	默认值	可选值
is-scroll	tabs是否可以左右拖动	Boolean	true	false
list	标签数组，元素为对象，如[{name: '推荐'}]	Array	-	-
current	指定哪个tab为激活状态	String | Number	0，即list的第一项	-
height	导航栏的高度，单位rpx	String | Number	80	-
font-size	tab文字大小，单位rpx	String | Number	30	-
duration	滑块移动一次所需的时间，单位秒	String | Number	0.5	-
active-color	滑块和激活tab文字的颜色	String	#2979ff	-
inactive-color	tabs文字颜色	String	#303133	-
bar-width	滑块宽度，单位rpx	String | Number	40	-
bar-height	滑块高度，单位rpx	String | Number	6	-
gutter	单个tab标签的左右内边距之和，单位rpx	String | Number	40	-
bg-color	tabs导航栏的背景颜色	string	#ffffff	-
name	组件内部读取的list参数中的属性名（tab名称），见上方说明	string	name	-
bold	激活选项的字体是否加粗	Boolean	true	false
show-bar	是否显示底部的滑块	Boolean	true	false
bar-style	底部滑块的样式，对象形式	Object	{}	-
active-item-style	当前活动Item的样式，对象形式	Object	{}	-
item-width 1.5.6	标签的宽度，单位rpx	String | Number	auto	-
count 1.7.4	组件内部读取的list参数中的属性名（badge徽标数），用法与name一致，见上方说明	string	count	-
offset 1.7.4	设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。	Array	[5, 20]	-

Events

事件名	说明	回调参数	版本
change	点击标签时触发	index: 点击了第几个tab，索引从0开始	-