swiper获取数据时,重复渲染dom。
程序员文章站
2024-03-25 12:21:10
...
今天我遇到了一个问题 就是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问题
上一篇: CSS3 @keyframes 规则
下一篇: H5 按钮抖动效果