具体代码如下所述：

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){

}

}

.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;

}

总结

以上所述是小编给大家介绍的vue中选项卡点击切换且能滑动切换功能的实现代码，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！