嗯，就这
<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>