tabs 标签

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

Events