基于uni-app新手也能方便使用的顶部导航栏

嗯，就这

<template>
	<view class="ctn">
		<!-- 顶部导航选项 -->
		<view class="topctn"> 
		  <view class="slct" :class="{act:currentTab==0}" :data-current="0" @click="dianji">1</view>
		  <view class="slct" :class="{act:currentTab==1}" :data-current="1" @click="dianji">2</view>
		  <view class="slct" :class="{act:currentTab==2}" :data-current="2" @click="dianji">3</view>
		  <view class="slct" :class="{act:currentTab==3}" :data-current="3" @click="dianji">4</view>
		</view>
		
		<!-- 内容标签 -->
		<swiper class="swiperslct" :current="currentTab" duration="200" @change="huadong">
		<swiper-item>1</swiper-item>
		
		<swiper-item>2</swiper-item>
		
		<swiper-item>3</swiper-item>
		
		<swiper-item>4</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab:'0',
			}
		},
		methods: {
			dianji(e) {
			     console.log(e);
				 var that = this;
				     if (this.currentTab === e.target.dataset.current) {
				       return false;
				     } else {
				       that.currentTab = e.target.dataset.current;
				     }
			   },
			   huadong (e) {
			     console.log(e);
				 var that = this;
				 that.currentTab = e.detail.current;
			},
		}
	}
</script>

<style>
.ctn{
	width: 100%;
	height: 100vh;
	overflow: scroll;
	background-color: #dedede;
}
.topctn{
	width: 100%;
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
}
.slct{
	margin: auto;
	padding: 20rpx;
}
.act{
	border-bottom: 1rpx solid #ef00a7;
	color: #ef00a7;
}
</style>