vue项目中使用swiper遇到的问题
// swiper版本
"swiper": "^6.3.5",
"vue-awesome-swiper": "^3.1.3",
1.问题:“项目中将图片变成异步获取的后,轮播失效
解决办法:在swiperOptions加入observer: true;observerParents: true;两段代码
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observerParents: true, // 修改swiper的父元素时,自动初始化swiper
2.问题: swiperOptions加入loop失效
解决办法:去掉以下代码
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
}
this.swiper.slideTo(0, 1000, false)
3.问题:swiper点击失效问题
原因:当loop为true时,会自动补充虚拟的DOM,在该DOM上Vue中的事件无法触发
解决办法:
swiperOptions: {
...
pagination: {
el: '#pagination'
},
on: {
click: function (e) {
// 当前 this 指向swiper,所以定义全局变量 var vm = null,在created中利用vm=this将vm指向this
vm.swiperSelected(e)
}
}
}
methods: {
swiperSelected (val){
// 此位置处理点击事件
}
}