# tabs 标签

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

uView中,共有2个组件可以实现tabs标签切换,分别是tabs组件,tabsSwiper组件,他们的异同点是:

  • tabs组件可以不结合uni-appswiper轮播组件使用,tabsSwiper组件是必须要结uni-appswiper轮播组件才能使用的。
  • tabs组件使用更简洁明了(这也是其存在的理由),tabsSwiper组件配置相对复杂一些。
  • tabsSwiper组件相比tabs组件,由于搭配了uni-appswiper轮播组件,获得了滑块跟随,标签颜色渐变等效果(请在演示中扫码查看效果),而tabs组件是不具备的。

总的来说,二者配置参数和功能都差不多,看用户的需求自行衡量该使用哪一个组件。

# 平台差异说明

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

# 基本使用

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

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

说明

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

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

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待收货'
				}, {
					name: '待付款'
				}, {
					name: '待评价',
					count: 5
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				console.log("index", 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属性。

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

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

# 控制tabs组件的宽度

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

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

# 控制底部滑块的样式

  1. 可以通过active-color控制颜色(同时为当前活动tab文字颜色和滑块的颜色)。
  2. bar-width控制滑块的长度(rpx)。
  3. bar-height控制滑块高度。
<u-tabs ref="tabs1" :list="list" bar-height="6" bar-width="40" active-color="#2979ff"></u-tabs>

# 控制tabs组件的活动tab样式

  1. 通过active-colorinactive-color控制tabs的激活和非激活颜色。
  2. font-size为tabs文字大小。
  3. v-model为初始化tabs的激活tab索引,默认为0。gutter为单个tab标签的左右内边距之和,即左右各占gutter的一半。
<u-tabs ref="tabs1" :list="list" active-color="#2979ff" inactive-color="#606266" font-size="30" v-model="current"></u-tabs>

# API

# Props

参数 说明 类型 默认值 可选值
is-scroll tabs是否可以左右拖动 Boolean true false
list 标签数组,元素为对象,如[{name: '推荐'}] Array - -
v-model 指定哪个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 标签的宽度,单位rpx String | Number auto -
count 组件内部读取的list参数中的属性名(badge徽标数),用法与name一致,见上方说明 string count -
offset 设置badge的位置偏移,格式为 [x, y],也即设置的为topright的值,单位rpx。 Array [5, 20] -

# Events

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