interruptor de pestaña uni-aplicación

<template>
<view>
	<!--顶部导航栏-->
	<view class="uni-tab-bar" style="height: 100upx;">
		<scroll-view scroll-x class="uni-swiper-tab">
		<view class="" style="display: flex;width: 93%;margin: 0 auto;">
		<block v-for="(tabBar,index) in tabBars" :key="index">
			<view class="swiper-tab-list cont1-text" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
				{
   
   {tabBar.name}}
				<view class="swiper-tab-line"></view>
			</view>
		</block>
		</view>
		</scroll-view>
	</view>
	<!--内容区-->
		<view class="uni-tab-bar">
			<swiper :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(content,index) in contentList" :key="index" >
					<view class="swiper-item">
						<view class="cont2 shadow bg-white">
							<view class="" style="width: 95%;height: 40upx;display: flex;justify-content: space-between;margin: 0 auto;margin-bottom: 10upx;">
								<text style="display: block;font-size: 32upx;font-weight: 600;">标准间（双人房）</text>
								<text style="display: block;font-size: 28upx;">订单状态</text>
							</view>
							<view class="cont2-a flex">
							  <view class="cont2-a-item1">
								  <image src="../../static/1.png" mode="aspectFill"></image>
							  </view>
							  <view class="cont2-b">
								  <view class="cont2-b-item1">
									<text>下单时间：2021-1-1 13:00</text>
								  </view>
								  <view class="cont2-b-item1">
									<text>数量：1</text>
								  </view>
								  <view class="cont2-b-item1">
									<text>总价：￥9.9</text>
								  </view>
								  <view class="cont2-b-item1">
									<text>订单号：111111111111111111</text>
								  </view>
								  <view class="">
									 <text class="cont2-b1-item3">再来一单</text>
									<text class="cont2-b1-item3">去付款</text>
								  </view>
							  </view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 0, //选中标签栏的序列
			contentList: [
				"全部",
				"待付款",
				"已完成",
			],
			tabBars:[
				{
				name: '全部',
				id: 'guanzhu'
				},
				{
				name: '待付款',
				id: 'tuijian'
				},
				{
				name: '已完成',
				id: 'redian'
				},
			],
			swiperHeight: 0
		}
	},
	components:{
	},

	onLoad() {

	},

	methods: {
		toggleTab(index){
			console.log(index)
			this.tabIndex = index
		},
		//滑动切换swiper
		tabChange(e){
			console.log(e.detail)
			const tabIndex = e.detail.current
			this.tabIndex = tabIndex
		}
	}

}
</script>

<style>
	.cont1-text{
		margin-right: 20upx;
		font-weight: 500;
		font-size: 36upx;
		padding-bottom: 6upx;
	}
	page {
		background-color: #ffffff;
		}
	.swiper-tab-list{
		color: #969696;
		font-weight: bold;
	}

	.uni-tab-bar .active{
		color: #343434;
	}
	.active .swiper-tab-line{
		border-bottom: 2upx solid #FDDE80;
	}
	.uni-swiper-tab{
		padding: 20upx;
	}
	.cont2{
		width: 93%;margin:0 auto;
		border-radius: 22upx;
	}
	.cont2-a{
		width: 100%;
		height: 232upx;
		justify-content: space-between;
		margin-bottom: 40upx;
		padding: 8upx;
		
	}
	.cont2-a-item1{
		width: 36%;
		height: 198upx;
	}
	.cont2-a-item1 image{
		width: 100%;
		height: 100%;
		border-radius: 30upx;
	}
	.cont2-b{
		width: 61%;
		height: 232upx;
	}
	.cont2-b-item1{
		width: 100%;
		height: 43upx;
	}
	.cont2-b-item1 text{
		/* font-size: 32upx;
		font-weight: 700; */
	}
	.cont2-b-item2{
		width: 100%;height: 114upx;margin:9upx 0 ;
	}
	.cont2-b-item2 rich-text{
		font-size: 16upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
	.cont2-b-item3{
		width: 30%;
		height: 50rpx;
		background-color: #FDDE80;
		float: right;
		border-radius: 7px;
		text-align: center;
		line-height: 50rpx;
		margin: 0 5px 10px 0;
	
	}
	.cont2-b1-item3{
		padding: 10rpx;
		background-color: #FDDE80;
		border-radius: 14rpx;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 10upx;
		float: right;
	}
</style>