uni-app tab滑动切换

1.父组件index.vue

<template>
	<view>
      <!-- 
	  * 头部tab
	  * 1.头部tab在点击的时候需把自己的index传到父组件中去通过
	  * 		this.$emit('方法名',index);
	  * 
	  *  -->
	<swiper-tab-head 
	:tabBars="tabBars" 
	:tabIndex="tabIndex"
	@tabtap="tabtap">
	</swiper-tab-head>
	
	<view class="uni-tab-bar">
		<!-- swiper属性：
		* 		current: 当前所在滑块的 index
		* 		duration:	Number	500	滑动动画时长
		* 		@change:	current改变时会触发 change 事件，event.detail = {current: current, source: source},通过监听index变化实现tab切换
		* 
		*  -->
	<swiper class="swiper-box" 
	:style="{height: swiperheight + 'px' }"
	:current="tabIndex"
	@change="tabChange">
		<swiper-item v-for="(items,index) in newslist" :key="index"> 
			<scroll-view scroll-y class="list" >
					<view v-for="(item,index1) in items.list" :key="index1">
						{{index1}}
					</view>
			</scroll-view>
		</swiper-item>
	</swiper>   
	</view>
	   
	</view>
</template>
<script>
	import swiperTabHead from "@/components/swiper-tab-head/swiper-tab-head.vue"
	export default {
		components:{
			swiperTabHead
		},
		data() {
			return {
				tabIndex:0,		//当前tab下标
				tabBars:[
					{ name:"关注",id:"guanzhu" },
					{ name:"推荐",id:"tuijian" },
					{ name:"体育",id:"tiyu" 	  },
					{ name:"热点",id:"redian"  },
					{ name:"财经",id:"caijing" },
					{ name:"娱乐",id:"yule"    },
				],	
				newslist:[

					{
						loadtext:"上拉加载更多",
						list:[
							  {
								userpic:"../../static/demo/userpic/12.jpg",
								username:"昵称",
								isguanzhu:false,
								title:"我是标题",
								type:"img", // img:图文,video:视频
								titlepic:"../../static/demo/datapic/11.jpg",
								infonum:{
									index:0,//0:没有操作，1:顶,2:踩；
									dingnum:11,
									cainum:11,
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/demo/userpic/12.jpg",
								username:"昵称",
								isguanzhu:true,
								title:"我是标题",
								type:"video", // img:图文,video:视频
								titlepic:"../../static/demo/datapic/11.jpg",
								playnum:"20w",
								long:"2:47",
								infonum:{
									index:1,//0:没有操作，1:顶,2:踩；
									dingnum:11,
									cainum:11,
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/demo/userpic/12.jpg",
								username:"昵称",
								isguanzhu:false,
								title:"我是标题",
								type:"img", // img:图文,video:视频
								titlepic:"../../static/demo/datapic/11.jpg",
								infonum:{
									index:0,//0:没有操作，1:顶,2:踩；
									dingnum:11,
									cainum:11,
								},
								commentnum:10,
								sharenum:10,
							},
							{
								userpic:"../../static/demo/userpic/12.jpg",
								username:"昵称",
								isguanzhu:true,
								title:"我是标题",
								type:"video", // img:图文,video:视频
								titlepic:"../../static/demo/datapic/11.jpg",
								playnum:"20w",
								long:"2:47",
								infonum:{
									index:1,//0:没有操作，1:顶,2:踩；
									dingnum:11,
									cainum:11,
								},
								commentnum:10,
								sharenum:10,
							}
						]
					}
				]
			}
		},
		onLoad() {
			/*
			* 接口uni.getSystemInfo：获取系统信息（屏幕高度，窗口高度等）
			* 1.style动态绑定样式不支持px单位，要用uni.upx2px()转换成px
			* 2.scroll-view里的scroll-y属性要设置高度才能纵向滚动
			* 3.动态计算出swiper高度并通过style绑定
			* 		:style="{height: swiperheight + 'px' }"
			* */ 
			uni.getSystemInfo({
				success: (res)=> {
					// 减去头部tab高度
					let height=res.windowHeight-uni.upx2px(100)
					this.swiperheight=height;
				}
			});
		},
		methods: {
			// tabbar点击事件
			tabtap(index){
				this.tabIndex=index;
			},
			// 滑动事件（tab下标与swiper下标相同则实现联动切换）
			tabChange(e){
				this.tabIndex=e.detail.current;
			}
		},
	}
</script>

<style>

</style>

2.封装的tab组件: swiper-tab-head.vue

<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x class="uni-swiper-tab" :style="scrollStyle">
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view class="swiper-tab-list" 
				:class="{'active':tabIndex==index}"
				@tap="tabtap(index)"
				:style="scrollItemStyle">
					{{tab.name}} {{tab.num?tab.num:''}}
					<!-- 下划线 -->
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			tabBars:Array,
			tabIndex:Number,
			scrollStyle:{
				type:String,
				default:""
			},
			scrollItemStyle:{
				type:String,
				default:""
			}
		},
		methods:{
			tabtap(index){
				//点击tab时把自己的index传给父组件index.vue
				this.$emit('tabtap',index);
			},
		}
	}
</script>

<style>
.uni-swiper-tab{
	border-bottom: 1upx solid #EEEEEE;
}
.swiper-tab-list{
	color: #969696;
	font-weight: bold;
}
.uni-tab-bar .active{
	color: #343434;
}
.active .swiper-tab-line{
	border-bottom: 6upx solid #FEDE33;
	width: 70upx;
	margin: auto;
	border-top: 6upx solid #FEDE33;
	border-radius:20upx;
}
</style>