uni-app 之来回滑动切换tab

<template>
	<view>
		<view class="end-title">
			<view @tap="tabtap(0)" :class="{btna:tabIndex == 0}">检查记录</view>
			<view @tap="tabtap(1)" :class="{btna:tabIndex == 1}">相关附件</view>
			<view @tap="tabtap(2)" :class="{btna:tabIndex == 2}">结论</view>
		</view>
		<view class="uni-tab-bar">
			<swiper class="swiper-box"  :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in tabBars" :key="index">
					<scroll-view scroll-y class="list">
						<template v-if="index==0">
							<record :item="detailData" :hiddens='hiddens'></record>
						</template>
						<template v-else-if="index==1">
							<annex :item="detailData" :hiddens='hiddens'></annex>
						</template>
						<template v-else>
							<result :item="detailData" :hiddens='hiddens' :fileUrl='fileUrl'></result>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import record from "../../components/detail/record.vue";
	import swiperTab from "../../components/index/swiper-tab.vue";
	import annex from "../../components/detail/annex.vue";
	import result from "../../components/detail/result.vue";
	export default {
		components: {
			record,
			annex,
			result,
			swiperTab

		},
		data() {
			return {
				btnnum: 0,
				detailData: {},
				hiddens: null,
				swiperheight: 500,
				tabIndex: 0,
				tabBars: [{
					name: '检查记录'
				}, {
					name: '相关附件'
				}, {
					name: '结论'
				}],
				fileUrl:''
			}
		},
		onLoad(e) {
			this.hiddens = e.a
			this.tabtap(e.a)
			this.detailData = JSON.parse(e.detailData)
			if(this.detailData.fileUrl){
			this.fileUrl = this.detailData.fileUrl
			}
			uni.getSystemInfo({
				success: (res) => {
					this.swiperheight= res.windowHeight - uni.upx2px(100)
				}
			});
		},
		
		methods: {
			tabtap(index) {
				this.tabIndex = index;
			},
			// 滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current;
			}


		},
	}
</script>

<style>
	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		height: 90upx;
		align-items: center;
		font-size: 34upx;
		background: #FFFFFF;

	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
		padding: 10upx 0;
		
		/* margin-bottom: 10upx; */
	}

	.end-cont {
		display: none;
	}

	.btna {
		color: #FFFFFF;
		background: #00A0FF;
		line-height: 70upx;
	}

	.dis {
		display: block;
	}

	.uni-swiper-tab {
		border-bottom: 1upx solid #EEEEEE;
		background-color: #FFFFFF;
		display: flex;
		height: 90upx;
		align-content: space-between;
	}

	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
		font-size: 34upx;
		text-align: center;
	}

	.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>