使用swiper动态加载数据遇到的坑

在页面开始先初始化的swiper，再发送请求动态加载数据然后生成html插入到swiper的容器里，然后发现多个swiper-slide之间没有间距贴在一起，滑不动的问题，按照官方示例生成的swiper-slide在右键审查元素时应该在动态添加上translate，rotate等属性，但是实际没有。

最开始怀疑是不是我引入的swiper不是最新版本，更新到最新版本后问题依然存在，然后想起是初始化的问题。

由于项目是从基于谷歌浏览器改版成基于IE浏览器，所以项目中基本上是以jQuery来控制DOM，其中遇到了使用数组的push和jQuery的html方法来动态生成页面（主要是一个个运单），页面中引用了swiper，再通过循环生成后台数据所反的相对应个数的slider，但是发现在页面载入后，组件并没有生效，后来终于通过一系列搜索找到了解决的方法，也是痴呆了TAT。

<section>标签中就是装的动态生成的内容。

这里是生成所有订单的方法，其中涉及到swiper的push方法在相关图片注释处。

接下来初始化swiper，然后在请求后台数据成功后的回调函数调用fullOrder方法

结果发现swiper根本没有被调用到，默默的mark一下，在图片多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。

正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的element.html()之后。由于swiper是需要 先初始化再执行 ，但这里是先生成swiper， 所以需要在生成swiper之后再初始化 。

只有这样在页面加载完后swiper才会被调用成功哒。

这个注意看swiper的文档就可以了,可以使用jquery动态添加元素，然后调用swiper的update()方法即可。下面是一个小例子，记得把swiper和jquery引入进来。

Swiper常用于移动端网站的内容触摸滑动。

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

---