安装
npm i vue-swiper-component --save
引用代码部分
import { Swiper, Slide } from 'vue-swiper-component';
components: {
Swiper,
Slide
}
template部分
三种配置
//异步加载轮播图的情况
<Swiper v-if="list.length > 0">
<Slide v-for="(item,index) in list" :key="index">
</Slide>
</Swiper>
//同步加载轮播图情况
<Swiper>
<Slide>
1
</Slide>
<Slide>
2
</Slide>
<Slide>
3
</Slide>
</Swiper>
//加一些参数配置情况
<Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
//添加click事件
</Slide>
</Swiper>
API
增加事件
transtionend 事件 每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加
@transtionend="getNum"
getNum(data) {
console.log(data);//输出轮播到第几张图片
}
Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如:
<Swiper ref="swiper"></Swiper>
this.$refs.swiper.prevSlide(); // 上一张图
this.$refs.swiper.nextSlide(); // 下一张图
this.$refs.swiper.slideTo(2); //某一张图