uni-app :左右滑动 swiper

官方文档 ： https://uniapp.dcloud.io/component/swiper?id=swiper

<template>
	<view>
		<view class="nav">
			<view :class="current== 0 ? 'skyblue' : '' " @tap="onnav(0)">安装信息</view>
			<view :class="current== 1 ? 'skyblue' : '' " @tap="onnav(1)">OBD数据</view>
			<view :class="current== 1 ? 'span spanright' : 'span '"></view>
		</view>
		
		// current  : 当前所在滑块的 index	
		// @change 事件 ： current 改变时会触发 change 事件，event.detail = {current: current, source: source}	
		
		<swiper :current="current" @change="onchange">
			<swiper-item>
				<view>
					第一个页面
				</view>
			</swiper-item>
			<swiper-item>
				<view>
					第二个页面
				</view>
			</swiper-item>
		</swiper>
	</view>

</template>
<script>
	export default {
		data(){
			return {
				current:0,
			}
		},
		methods:{
			onnav(index) {
				this.current = index;
			},
			onchange(e){
				this.current = e.detail.current;
			}
			
		}

	}
</script>
<style lang="scss">
	.nav {
		position: relative;
		border-bottom: 1px solid #dddddd;
		&::after {
			display: block;
			content: "";
			height: 0;
			line-height: 0;
			visibility: hidden;
			clear: both;
		}
		view {
			float: left;
			width: 50%;
			text-align: center;
			padding: 30rpx 0rpx;
		}
		
		.span {
			width: 50%;
			position: absolute;
			padding: 4rpx 0rpx;
			background-color: #2598e4;
			bottom: 0;
			left: 0;
			transition: ease-in-out .2s;
			transform: translateY(100%);
		}
		.spanright {
			left: 50%;
		}
		.skyblue {
			color: #2598e4;
		}
	}
</style>