uniapp-实现左右滑动的tab切换

uView2.0中的u-tabs，是不能够左右滑动的，通过u-tabs和swiper结合一下二次封装后的组件就可以手指左右滑动，也可以点击滑动啦！适用于多种场景！

<template>
	<view class="">
		<view class="status_bar">
			<!-- 状态栏占位 -->
		</view>
		<view class="tabs-container">
			<u-tabs :list="tabList" :current="tabsId" @click="click"></u-tabs>
		</view>
		<swiper style="height: 80vh" :circular="!canCircular" @change="slideOn" :current="tabsId">
			<swiper-item v-for="(tab, index) in contentList" :key="index">
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">{{ tab.content }}</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">11</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">22</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">12</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">12</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">21</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [
				{
					name: '关注'
				},
				{
					name: '推荐'
				},
				{
					name: '电影'
				},
				{
					name: '科技'
				}
			],
			contentList: [
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				}
			],
			tabsId: 0
		};
	},
	// 解决当swiper数量过多时卡顿优化
	computed: {
		canCircular() {
			return this.tabList.length > 0; // 看这里重点
		}
	},
	methods: {
		slideOn(e) {
			<template>
	<view class="">
		<view class="status_bar">
			<!-- 状态栏占位 -->
		</view>
		<view class="tabs-container">
			<u-tabs :list="tabList" :current="tabsId" @click="click"></u-tabs>
		</view>
		<swiper style="height: 80vh" :circular="!canCircular" @change="slideOn" :current="tabsId">
			<swiper-item v-for="(tab, index) in contentList" :key="index">
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">{{ tab.content }}</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">11</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">22</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">12</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">12</view>
				<view class="" style="width: 100%; height: 200rpx; background-color: pink; margin-bottom: 20rpx">21</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [
				{
					name: '关注'
				},
				{
					name: '推荐'
				},
				{
					name: '电影'
				},
				{
					name: '科技'
				}
			],
			contentList: [
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				},
				{
					content: 'sdfsdfsdfsdf'
				}
			],
			tabsId: 0
		};
	},
	// 解决当swiper数量过多时卡顿优化
	computed: {
		canCircular() {
			return this.tabList.length > 0; // 看这里重点
		}
	},
	methods: {
		slideOn(e) {
			if (e.detail.source === 'touch') {
				this.tabsId = e.detail.current;
			}
		},
		click(item) {
			this.tabsId = item.index;
		}
	}
};
</script>

<style scoped lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
</style>

		},
		click(item) {
			this.tabsId = item.index;
		}
	}
};
</script>

<style scoped lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
</style>

另外还可以通过scroll-view实现触底加载，以及下拉刷新