在main.js里面
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
<swiper :options="swiperOption">
<swiper-slide>
<div class="grade-item" @click="shikGrade">
<h3><van-icon name="arrow" />1A班</h3>
<p>影片:567</p>
<p>觀看:567</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="grade-item" @click="shikGrade">
<h3><van-icon name="arrow" />1A班</h3>
<p>影片:567</p>
<p>觀看:567</p>
</div>
</swiper-slide>
</swiper>
然后再script部分引入
import "@/assets/css/swiper.min.css";
页面vue实例data里的配置项
data() {
return {
swiperOption: {
//swiper配置
//显示分页
pagination: {
el: ".swiper-pagination",
},
on: {
slideChangeTransitionEnd: null,
},
},
active: 0,
gradeNav: ["一年級", "二年級", "三年級"],
};
},
//生命周期 - 创建完成（访问当前this实例）
created() {
//切换swiper时促发
this.swiperOption.on.slideChangeTransitionEnd = function(swiper) {
this.active = swiper.realIndex;
}.bind(this);
}
