swper 实现滑动切换功能的两种方式

1、共用一个样式结构，展示不同数据。
样式是一样的，在 tabBars 数组里面添加不同的数据，根据 id 值判断，遍历数组得到不同的数据。

<template>
	<view>
		<!--顶部导航栏-->
		<view>
			<view class="uni_tab_bar">
				<view class="uni_swiper_tab Insurance_top">
					<block v-for="(tabBar,index) in tabBars" :key="index">
						<view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}"
							@tap="toggleTab(tabBar.id)">
							{{tabBar.name}}
							<view class="swiper_tab_line">
							</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 显示内容区域 -->
			<view class="Insurance_centext">
				<swiper :current="tabIndex" @change="tabChange" class="Insurance_centext">
					<swiper-item v-for="(content,index) in tabBars" :key="index">
						<view class="swiper_item">
							{{content.name}}
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabIndex: 0, //选中标签栏的序列
				tabBars: [
					{
						id: '0',
						name: '第一列',
						
					},
					{
						id: '1',
						name: '第二列',
						
					},
					{
						id: '2',
						name: '第三列',
						
					},
				],
			}
		},
		methods: {
			toggleTab(index) {
				// 获取下标
				this.tabIndex = index;
			},
			//滑动切换swiper
			tabChange(e) {
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			},
		}
	}
</script>

<style>
	/* 头部导航 */
	.Insurance_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
	}

	.swiper_tab_list {
		color: #888888;
		width: 50%;
		text-align: center;
	}

	.uni_tab_bar .active {
		color: #0c70cb;
		margin-top: 20rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	/* 导航底部 boder 线 */
	.active .swiper_tab_line {
		border-bottom: 5rpx solid #0c70cb;
		margin-top: 20rpx;
		width: 100%;
	}

	.uni_swiper_tab {
		border-bottom: 2rpx solid #eeeeee;
		margin-bottom: 15rpx;
	}
</style>

2、不同的样式结构。
这种方式就相对于灵活许多了，在每一个 swiper-item 里面添加每个滑动模块的数据结构即可，每个滑动模块之前不会相互干扰

<template>
	<view class="big">
		<view class="trade">
			<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
				第一列
			</view>
			<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
				第二列
			</view>
			<view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">
				第三列
			</view>
		</view>
		<swiper style="height: 100vh;" :current="curr" @change="setCurr">
			<swiper-item>
				<scroll-view>
					第一列
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view>
					第二列
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view>
					第三列
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curr: 0
			}
		},
		methods: {
			setCurr(e) {
				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
				this.curr = thisCurr;
			}
		}
	}
</script>

<style>
	.trade {
		width: 100%;
		color: #0c70cb;
		overflow: auto;
	}

	.trade view {
		text-align: center;
		padding: 20rpx 0rpx;
		width: 30%;
		float: left;
	}

	.trade .texts.active {
		border-bottom: 6rpx solid #0c70cb;
	}
</style>