UNI-APP中，swiper和tabbar结合实现滑动翻页效果

<template>
	<view>
		<!--导航栏-->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">设备组详情</block>
			<block slot="right">
				<text class="margin-right text-df">编辑</text>
			</block>
		</cu-custom>
		<!--tab栏-->
		<scroll-view scroll-x class="bg-blue nav">
			<view class="flex text-center justify-around">
				<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="bg-blue" style="height: 5rpx;"></view>
		<!--swipe-->
		<swiper class="tab-view" ref="swiper1" id="tab-bar-view" :current="tabIndex" :duration="300" @change="onswiperchange">
		    <swiper-item>
		    	<view class="swiper-item bg-blue">A</view>
		    </swiper-item>
			<swiper-item>
				<view class="swiper-item bg-blue">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item bg-blue">c</view>
			</swiper-item>
			
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//tab栏
				TabCur: 0,
				tabs: ['基本信息', '巡检信息', '巡检信息1'],
				tabIndex: 0,
			}
		},
		onLoad() {
		    
		},
		methods: {
			/*tab栏*/
			tabSelect(e) {
				console.log("ddd")
				console.log(e)
				this.TabCur = e.currentTarget.dataset.id;
				this.tabIndex = e.currentTarget.dataset.id;
				
				
			},
			
			onswiperchange(e){
				console.log(e)
				this.TabCur = e.target.current;
				this.tabIndex = e.target.current;
			},
		}
	}
</script>

<style lang="scss">
.ic-add{
	font-size: 24rpx;
}

.swiper-item{
	height: 500rpx;
}

</style>

其中，tabbar使用colorUI中的nav组件实现。

 完！！！

<template>
	<view>
		<!--导航栏-->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">设备组详情</block>
			<block slot="right">
				<text class="margin-right text-df">编辑</text>
			</block>
		</cu-custom>
		<!--tab栏-->
		<scroll-view scroll-x class="bg-blue nav">
			<view class="flex text-center justify-around">
				<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="bg-blue" style="height: 5rpx;"></view>
		<!--swipe-->
		<swiper class="swipe-view" :current="tabIndex" :duration="300" @change="onswiperchange">
		    <swiper-item>
				<basic-info></basic-info>
		    </swiper-item>
			<swiper-item>
				<inspection></inspection>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import basicInfo from './basic-info/basic-info.vue'
	import inspection from './inspection/inspection.vue'
	
	export default {
		components:{
			inspection,
			basicInfo
		},
		data() {
			return {
				//tab栏
				TabCur: 0,
				tabs: ['基本信息', '巡检信息'],
				tabIndex: 0,
			}
		},
		onLoad() {
		    
		},
		methods: {
			/*tab栏*/
			tabSelect(e) {
				console.log("ddd")
				console.log(e)
				this.TabCur = e.currentTarget.dataset.id;
				this.tabIndex = e.currentTarget.dataset.id;
				
				
			},
			
			onswiperchange(e){
				console.log(e)
				this.TabCur = e.target.current;
				this.tabIndex = e.target.current;
			},
		}
	}
</script>

<style lang="scss">
.ic-add{
	font-size: 24rpx;
}

.swipe-view{
	height: calc(100vh - var(--status-bar-height) - 45px - 45px);
}
</style>