swiper滑动切换使用（手动、点击滑动均可）

当前页面的swiper滑动切换（手动、点击滑动均可）

<template>
	<view class="content">
		<view class="nav">
			<view :class="current== 0 ? 'skyblue' : '' " @tap="onnav(0)">当前课程</view>
			<view :class="current== 1 ? 'skyblue' : '' " @tap="onnav(1)">历史课程</view>
			<!-- //注：回调函数，当你轻触(tap)Swiper后执行。在移动端，click会有 200~300 m延迟，所以请用tap代替click作为点击事件。接受swiper实例和touchend事件作为参数 -->
			<view :class="current== 1 ? 'span spanright' : 'span'"></view>
		</view>
		
		<!-- 页面内容 -->
		<swiper :current="current" @change="onchange">
			<!-- 当前课程页面内容 -->
			<swiper-item>
				<view>
					第一个页面
				</view>
			</swiper-item>
			<!-- 历史课程页面内容 -->
			<swiper-item>
				<view>
					<view>第二个页面</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>

	export default {
		// data() {
		// 	return {
		// 		title: '课程',
		// 		data: {},
		// 	}
		// },
		data(){
			return {
				current:0,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			onnav(index) {
				this.current = index;
			},
			onchange(e){
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		width: 375px;
		height: 50px;
		opacity: 1;
		color: rgba(0,0,0,0.60);
		font-weight: 400;
		view:nth-child(1),:nth-child(2){
			float: left;
			width: 56px;
			height: 16px;
			opacity: 1;
			font-size: 14px;
			text-align: LEFT;
			padding: 17px 0;
		}
		view:nth-child(1){
			margin-left: 104px;
		}
		view:nth-child(2){
			margin-left: 54px;
		}
		.span {
			width: 56px;
			height: 2px;
			opacity: 1;
			position: absolute;
			background-color: #5699e7;//课程滑动下面的横线
			top: 38px;
			margin-left: 104px;
			transition: ease-in-out .2s;
			transform: translateY(100%);
		}
		.spanright {
			left: 110px;
		}
		.skyblue {
			color: #5699E7;
			font-weight: 700;
		}
	}
</style>