欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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问题

相关标签: swiper