效果示例：

（左右拖动切换标签页）

https://hellouniapp.dcloud.net.cn/pages/template/tabbar/tabbar

 

完整代码

<template>
	<view>
		
		<view class="myTabs" style="display: flex; flex-direction: row; justify-content: space-around;">
			<view :key="0" :class="{'activedTab':activedTab == 0}" @click="activedTab = 0">
				第一类
			</view>
			<view :key="1" :class="{'activedTab':activedTab == 1}" @click="activedTab = 1">
				第二类
			</view>
		</view>
		
		<view style="height: 60rpx; background-color: #A5A5A5;">
			
		</view>
		
		<swiper :current="activedTab" :autoplay="false" :duration="300" @change="changeContentBox">
			<swiper-item>
				<view>
					第一屏内容 
				</view>
				<view>
					当前activedTab =  {{activedTab}}
				</view>
			</swiper-item>
			
			
			<swiper-item>
				<view>
					第二屏内容 
				</view>
				<view>
					当前activedTab =  {{activedTab}}
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activedTab: 0
			}
		},
		methods: {
			changeContentBox(e){
				this.activedTab = e.detail.current
			}
		},
		onLoad () {
			
		}
	}
</script>

<style>
	.activedTab {
		font-size: 50rpx;
		color: red;
		font-weight: bold;
	}
</style>

拆分组件

https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control

https://hellouniapp.dcloud.net.cn/pages/component/swiper/swiper

合并组件

https://hellouniapp.dcloud.net.cn/pages/template/tabbar/tabbar