<template>
<div id="app">
<div class="tab">
<ul>
<li @click="onActive(0)" :class="index==0?'active':''">
版本1
</li>
<li @click="onActive(1)" :class="index==1?'active':''">
版本2
</li>
<li @click="onActive(2)" :class="index==2?'active':''">
版本3
</li>
</ul>
</div>
<div class="container">
<swiper
:options="swiperOption"
@swiper="onSwiper"
@slideChange="onSlideChange"
ref="mySwiper">
<swiper-slide>
<div class="version">
111
</div>
</swiper-slide>
<swiper-slide>
<div class="version">
222
</div>
</swiper-slide>
<swiper-slide>
<div class="version">
333
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
export default {
name: 'App',
data(){
return{
index:0,
swiperOption: {
slidesPerView: 1,
// 设置分页器
pagination: {
el: '.swiper-pagination',
// 设置点击可切换
clickable: true
},
}
}
},
components: {
// eslint-disable-next-line vue/no-unused-components
// VueTabsSwipe
},
computed: {
swiper () {
return this.$refs.mySwiper.$swiper
}
},
methods: {
onSwiper () {
},
onSlideChange () {
this.index = this.$refs.mySwiper.$swiper.activeIndex
},
onActive(index){
this.index = index
console.log(this.index)
this.swiper.slideTo(index,1000,false)
}
}
}
*{
margin: 0;
padding: 0;
}
.tab{
position: fixed;
width: 100%;
z-index: 999;
background: #FFF;
}
ul{
list-style: none;
display: flex;
justify-content: center;
}
li{
width: 30%;
height: 35px;
line-height: 35px;
}
.version{
height: 600px;
color: #FFF;
}
.container{
padding-top: 55px;
background: #CCC;
}
li.active{
border-bottom: 1px solid red;
border-width: 2px;
}