返回介绍

开发指南

组件

JS

模板

tabs 标签

发布于 2021-04-03 05:35:23 字数 6398 浏览 1242 评论 0 收藏 0

tabs 标签 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

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

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

说明

is-scroll参数很重要,如果您的tabs项只有几个,且不想tabs导航栏可以被左右滑动的话,请一定要设置is-scrollfalse,因为它默认为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-colorinactive-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-scrolltabs是否可以左右拖动Booleantruefalse
list标签数组,元素为对象,如[{name: '推荐'}]Array--
current指定哪个tab为激活状态String | Number0,即list的第一项-
height导航栏的高度,单位rpxString | Number80-
font-sizetab文字大小,单位rpxString | Number30-
duration滑块移动一次所需的时间,单位String | Number0.5-
active-color滑块和激活tab文字的颜色String#2979ff-
inactive-colortabs文字颜色String#303133-
bar-width滑块宽度,单位rpxString | Number40-
bar-height滑块高度,单位rpxString | Number6-
gutter单个tab标签的左右内边距之和,单位rpxString | Number40-
bg-colortabs导航栏的背景颜色string#ffffff-
name组件内部读取的list参数中的属性名(tab名称),见上方说明stringname-
bold激活选项的字体是否加粗Booleantruefalse
show-bar是否显示底部的滑块Booleantruefalse
bar-style底部滑块的样式,对象形式Object{}-
active-item-style当前活动Item的样式,对象形式Object{}-
item-width 1.5.6标签的宽度,单位rpxString | Numberauto-
count 1.7.4组件内部读取的list参数中的属性名(badge徽标数),用法与name一致,见上方说明stringcount-
offset 1.7.4设置badge的位置偏移,格式为 [x, y],也即设置的为topright的值,单位rpx。Array[5, 20]-

Events

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文