页面结构

<template>
	<view>
		// tab选项卡
		<tab :tabList="tabList" :toView="toView" :tabIndex="tabIndex" @tab="tab"/>
		// swiper 内容部分
		<tabSwiper :tabList="tabList" @change="change"/>
	</view>
</template>
<script>
	// 引入组件
	import tab from "../../components/tab/tab.vue"
	import tabSwiper from "../../components/tab/swiper.vue"
	export default {
		data() {
			return {
				tabIndex:0,
				// 点级tab选项卡之后可以设置高亮
				activeIndex:0,
				// 当超出显示区域时 点击内容部分 上方的tab项跟着一起走动
				toView:"",
				tabList:[
					{id:"tab1",tabname:"Tab1",contentName:"content1"},
					{id:"tab2",tabname:"Tab2",contentName:"content2"},
					{id:"tab3",tabname:"Tab3",contentName:"content3"},
					{id:"tab4",tabname:"Tab4",contentName:"content4"},
					{id:"tab5",tabname:"Tab5",contentName:"content5"},
					{id:"tab6",tabname:"Tab6",contentName:"content6"},
					{id:"tab7",tabname:"Tab7",contentName:"content7"},
					{id:"tab8",tabname:"Tab8",contentName:"content8"},
					{id:"tab9",tabname:"Tab9",contentName:"content9"},
					{id:"tab10",tabname:"Tab10",contentName:"content10"},
				]
			}
		},
		// 注册组件 tab栏和内容部分
		components:{tab,tabSwiper},
		methods: {
			// 点击tab触发
			tab({data,index}){
				// 实现点击tab选项卡 下方内容一起切换
				this.activeIndex = index
			},
			// 当内容页面发生变化时触发
			change(current){
				// 将内容的index与tab的进行绑定 实现联动
				this.tabIndex = current
				// 滚动到的视图ID
				this.toView = this.tabList[this.tabIndex].id
			}
		}
	}
</script>

tab.vue 组件 tab选项卡

<template>
	<view>
		<view class="tab">
			// :scroll-into-view="toView" 内容切换 tab切换
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="toView">
				<view class="tab-scroll_box" >
					<view 
						// 此处绑定的id 是为了配合 :scroll-into-view="toView"
						:id="item.id"
						@click="clickTab(item,index)" 
						:class="{active:activeIndex===index}" 
						class="tab-scroll_item" 
						v-for="(item,index) in tabList" 
						:key="index"
					>
						{{item.tabname}}
					</view> 	
				</view>
			</scroll-view>
			<view class="tab-icons">
				<uni-icons type="gear" size="26" color="#666"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			tabList:{
				type:Array,
				default(){
					return []
				}
			},
			// 实现内容带动tab的切换
			tabIndex:{
				type:Number,
				default:0
			},
			// 滚动到的视图ID
			toView:{
				type:String
			}
		},
		data(){
			return {
				// 点击tab之后 控制高亮的显示
				activeIndex:0,
			}
		},
		watch:{
			tabIndex(newVal){
				// 实现内容带动tab联动 监听tabIndex的新、旧值
				this.activeIndex = newVal
			}
		},
		methods:{
			// 点击tab
			clickTab(item,index){
				this.activeIndex = index
				this.$emit("tab",{data:item,index:index})
			}
		}
	}
</script>

<style lang="scss">
	// coding
</style>

swiper.vue 组件 swiper内容展示

	<template>
		<view class="content">
			// @change 监听内容页面的swiper变化
			<swiper :duration="1000" @change="change">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<view class="swiper-item">{{item.contentName}}</view>
				</swiper-item>
			</swiper>
		</view>
	</template>

	<script>
		export default{
			props:{
				tabList:{
					type:Array,
					default(){
						return []
					}
				}
			},
			methods:{
				// 监听swiper的变化
				change(e){
					const {current} = e.detail
					this.$emit('change',current)
				}
			}
		}
	</script>

	<style lang="scss">
		// coding
	</style>

效果展示