tabsSwiper 全屏选项卡 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！

# tabsSwiper 全屏选项卡

该组件内部实现主要依托于uni-appscroll-view和swiper组件，主要特色是切换过程中，tabsSwiper文字的颜色可以渐变，底部滑块可以跟随式滑动，活动tab滚动居中等。应用场景可以用于需要左右切换页面，比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。

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

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

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

注意

由于支付宝小程序不支持uni的swiper组件transition事件的dx参数，故此组件不支持支付宝小程序
此组件目前为uView的vue版本，非nvue版本(制作中)，内部使用uni-appswiper组件为基础，swiper是单页组件，适合做简单列表左右滑动，因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。如果要实现类似腾讯新闻APP首页可以左右滑动复杂的多个tab切换，不建议使用本组件，如果使用，请自行测试列表很长时的切换流畅度。后续uView会对nvue进行兼容，增强此组件在APP上的能力。
官方有一个nvue新闻模板示例，内有左右滑动tab功能，具体参考：
插件市场新闻模板示例 (opens new window)

# 平台差异说明

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

# 基本使用

通过设置is-scroll(默认为true)，配置tabsSwiper组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为false，5个标签以上，建议可以左右拖动。具体的标签，通过list参数配置，该参数要求为数组，元素为对象，对象要有name属性，见示例：

说明

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

<u-tabs-swiper ref="tabs1" :list="list" :is-scroll="false"></u-tabs-swiper>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待收货'
				}, {
					name: '待付款'
				}, {
					name: '待评价',
					count: 5
				}],
			}
		}
	}
</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-swiper ref="tabs1" name="cate_name" count="cate_count" :list="list" :is-scroll="false"></u-tabs-swiper>

<script>
	export default {
		data() {
			return {
				list: [{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
                    cate_count: 5
				}],
			}
		}
	}
</script>

# 控制底部滑块的样式

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

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

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

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

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

# 使用案例

该组件必须搭配uni-appswiper组件才能使用，可以实现左右滑动，同时还可以搭配uView的loadmore实现底部加载更多的功能，注意：

必须要给组件设置ref属性，因为结合uni的swiper组件时需要调用tabsSwiper内部的方法，详见示例。
本示例中在swiper-item中嵌套了可选的uni-appscroll-view组件，uni官方不建议在APP-vue和小程序中scroll-view中使用map、video等原生组件，
必须将组件的current参数，设置为animationfinish中的返回值。

具体请参考：uni的scroll-view组件文档 (opens new window)

注意：由于tabsSwiper组件需要结合uni的swiper组件使用，过程较为复杂，故此示例代码仅作参考使用，请勿直接复制粘贴使用，具体使用方法请下载查阅uView的tabsSwiper案例。

<template>
	<view>
		<view>
			<u-tabs-swiper ref="tabs1" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					...
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '十年'
				}, {
					name: '青春'
				}, {
					name: '之约'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
                                tabs:[{
					id: '1'
				}, {
					id: '2'
				}, {
					id: '3'
				}]  // 要展示的业务数据列表
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
		}
	};
</script>

# 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	-
swiper-width	tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx	string \| Number	750	-
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	{}	-
count	组件内部读取的`list`参数中的属性名（badge徽标数），用法与`name`一致，见上方说明	string	count	-
offset	设置badge的位置偏移，格式为 [x, y]，也即设置的为`top`和`right`的值，单位rpx。	Array	[5, 20]	-

# Events

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

← tabs 标签 Subsection 分段器 →