vue 中使用swiper 动态获取图片后滑动效果失效
swiper滑动失效的原因是因为swiper的初始化在数据加载之前完成了，解决这个问题有两种方法：
1. 使用vue提供的$nextTick()方法
在数据初始化完毕之后，再初始化swiper就可以了
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
loop: true, //循环切换
autoplay: true,//可选选项，自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}）
})
2.在swiper初始化的时候
swiper1 = new Swiper('.swiper-container', {
loop: true, //循环切换
autoplay: true,//可选选项，自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper
});
相关文章
