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

JS通过push方法动态添加swiper组件的slider,第1张

由于项目是从基于谷歌浏览器改版成基于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才会被调用成功哒。

先用jquery的append插入一段html  input,用js实现渲染input得到combobox ,

比如在一个div中加入combobox

$("div").append("<input id='combobox'></input")

$("#combobox").combobox({

    url:'getComboData',

    valueField:'value',

    textField:'text'

})

小程序js中引入组件如一下步骤:

1、准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内容(一般是固定的库)。

2、打开util.js,继续填写重要内容将要使用的方法用module.exports给暴露出来。

3、将外部js放在指定的文件夹utils里(utils规定存放js库和数字格式化文件)。

4、在想要用到这个方法的js里面require这个js,然后调用即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11630670.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存