vue中如何实现选项卡点击切换且能滑动切换功能

这篇文章主要介绍vue中如何实现选项卡点击切换且能滑动切换功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体代码如下所述：

 <div>   <div class="navlist">    <ul>     <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}</i>     </li>    </ul>   </div>   <div class="swiper-container swiper_con">    <div class="swiper-wrapper">     <!-- 第一个swiper -->     <div class="swiper-slide" ref="viewBox">1111     </div>     <!-- 第二个swiper -->     <div class="swiper-slide">2222     </div>    </div>   </div>  </div> <script>  export default {   name: "swiper",   data() {    return {     navList:[      {name:'热门答疑'},      {name:'北清状元'}     ],     nowIndex:0,    }   },   components:{   },   mounted() {    var that=this    that.mySwiper = new Swiper('.swiper-container',{      initialSlide:0,      autoplay:false,      keyboardControl:true,      autoHeight:true,      observer:true,      observeParents:true,      onSlideChangeStart:function(){       // console.log(that.mySwiper.activeIndex)       that.nowIndex=that.mySwiper.activeIndex      }     });    // this.getList();   },   methods: {    tabClick(index){     this.nowIndex = index     this.mySwiper.slideTo(index,1000,false)    },   },  created(id){    } } </script> <style> .navlist{  width:100%;  height:40px;  border-bottom:1px solid rgba(151,151,151,0.1);  position:relative; } .navli{  padding:10px 0px;  text-align:center;  float:left;  margin:0 1.2rem; } .navli i{  font-style: normal;  font-size: 16px; } .activeT{  color:#00ba6b;  padding-bottom: .3rem;  border-bottom: 2px solid #00ba6b; } .swiper_con{  width:100%;  margin-bottom:40px;  position:relative; }  .choosegrand{  position:absolute;  top:-3;  right:0; } .show{  display:block; } .none{  display:none; } </style>

以上是“vue中如何实现选项卡点击切换且能滑动切换功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！