版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liyunkun888/article/details/83068497
一、问题描述
在开发一个Jquery项目时,用到了Swiper插件,并且因为要求数据的动态性,所以swiper-wrapper里面的swiper-silde都是由Jquery动态渲染出来的DOM,结构如图所示
二、问题分析
在使用上图结构时,添加静态数据可以使用Swiper的所有功能,但在动态的向swiper-wrapper中添加swiper-slide时,Swiper的自动轮播和左右滑动功能就会失效。也就是说Swiper不能用了。
后来看了下官网文档然后认真理了下项目的思路,发现应该是同步异步的原因所导致,在项目初始化时,Swiper会自动的扫描swiper-wrapper下的swiper-slide的个数,然后根据这个在初始化的Swiper。但是在这个时候因为Ajax是一个异步请求,所以很有可能这个时候Ajax的请求还没有完全的完成。所以导致了swiper-wrapper里面的内容是空的,这也就是导致Swiper失效的直接原因。
三、解决方案
解决方案分为两种:
把Swiper的初始化直接放到Ajax请求的成功回调里面
在初始化Swiper的时候在里面加上它的两个属性
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
————————————————
版权声明:本文为CSDN博主「不想写代码的码农」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/liyunkun888/article/details/83068497