【bug】Swiper動態渲染swiper-slide後輪播圖劃不動解決方案
阿新 • • 發佈：2018-12-15
一、問題描述
在開發一個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