今天我遇到了一个问题 就是swiper获取数据时当数据只有一条时,重复渲染dom。
在你初始化渲染dom时,
new Swiper('#swiper-container3', {
// slidesPerView: "auto",
nextButton: '#swiper-container3 .swiper-button-next',
prevButton: '#swiper-container3 .swiper-button-prev',
slidesPerView: 4,
loop: true
});
有这样一个参数:loop;
通过查询swiper 的API发现
loop:设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。
loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。
所以
new Swiper('#swiper-container3', {
// slidesPerView: "auto",
nextButton: '#swiper-container3 .swiper-button-next',
prevButton: '#swiper-container3 .swiper-button-prev',
slidesPerView: 4,
loop: false
});
把它设置为false就可以解决重复渲染dom问题