JS通过push方法动态添加swiper组件的slider

Posted 2023-05-03

参考技术A

由于项目是从基于谷歌浏览器改版成基于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的使用方法，以及各种JS插件的使用通用技巧

任何一个JS插件，都可以看做是一个组件。

组件包含三种东西：HTML布局，CSS样式表，JS代码。

组件使用的时候：要也是要注意三个东西

一.html布局。

　　通过HTML结构分析，来快速的了解，插件的html布局。

　　1.HTML一般只有两种结构，父子结构，兄弟结构。

　　2.分析层数，分析出最精简的结构，看看层数，父子结构，就看成是2层

二.css样式表

　　这个一般不需要分析。

三.JS使用

　　第三方组件，比如swiper，都是使用对象作为参数进行配置。

　　对象是对象，参数是参数。对象本质，参数是用途。

　　在函数中，参数可以接受，JS的8种数据类型。参数可以是对象的形式。

　　swiper使用对象，作为参数，在对象中进行配置，可以理解成------为swiper配置它的配置参数。

总的来说：找到官方文档很重要，用别人的插件，就要遵循别人的布局结构，和配置参数。