- swiper缩略图展示的时候必须要保证全部dom挂在完毕,
$nextTick
就是保证在所有图片加载完毕之后执行的函数
- 当swiper需要展示的图片数量小于3个时,就会出现各种奇妙的错误,为解决这个问题需要在初始化swiper的时候加上
watchOverflow: true
,同时官网文档要求loop:false
;虽然loop为false,但是实现的是依旧循环的效果
- 以下代码可以写在获取完数据之后执行此函数
this.$nextTick(()=>{
var galleryThumbs = new Swiper(".gallery-thumbs", {
spaceBetween: 10,
slidesPerView: 2,
loop: false,
freeMode: true,
loopedSlides:2, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
watchOverflow: true
});
var galleryTop = new Swiper(".gallery-top", {
spaceBetween: 10,
loop: true,
loopedSlides:2, //looped slides should be the same
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
thumbs: {
swiper: galleryThumbs
},
watchOverflow: false
});
});