tab栏组件切换（暂定）

<template>
	<view>
		<!--顶部导航栏-->
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tabBar,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						{{tabBar.name}}
						<view class="swiper-tab-line">
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		
		<!--内容区-->
		<view class="uni-tab-bar">
			<swiper :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(content,index) in ccc" :key="index" >
					<!-- <view class="swiper-item">{{content.name}}</view> -->
					<Hot v-if="index===0"></Hot>
					<Menu v-if="index===1"></Menu>
					<Qita v-if="index===2"></Qita>
				</swiper-item>
			</swiper>
		</view>
		
		
	</view>
	
	
</template>

<script>
	import Hot from "../../components/hot/Hot.vue"
	import Menu from "../../components/menu/Menu.vue"
	import Qita from "../../components/qita/Qita.vue"
	export default {
		data() {
			return {
				tabIndex: 0,//选中标签栏的序列
				
				tabBars:[
					{
						name: '关注',
						id: '23',
						index:0
					},
					{
						name: '推荐',
						id: '11',
						index:1
					},
					{
						name: '热点',
						id: '4',
						index:2
					},
					{
						name: '体育',
						id: '55',
						index:3
					},
					{
						name: '财经',
						id: '5',
						index:4
					},
					{
						name: '娱乐',
						id: '2',
						index:5
					}
				],
				swiperHeight: 0
			}
		},
		components:{
			Hot,Menu,Qita
		},
		onLoad() {
		},
		methods: {
			toggleTab(index){
				console.log(index)
				this.tabIndex = index
				
			},
			//滑动切换swiper
			tabChange(e){
				console.log(e.detail)
				this.tabIndex = e.detail.current
			},
		}
	}
</script>

<style>
	.swiper-tab-list{
		color: #969696;
		display: inline-block;
		font-weight: bold;
		margin: 30rpx;
	}
	.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;
	}
	.uni-swiper-tab{
		border-bottom: 1upx solid #eeeeee;
	}
	
	

</style>
``