解决layui轮播数据不显示的情况
最近接触到一个项目,想实现一个转盘的功能。因为原项目是二次开发,项目前端用的是layui框架,业主在后台方向,所以我没怎么碰前端。使用layui实现轮播时,发现从后台异步获取数据,但是没有显示轮播,如下图:所示。
用浏览器调试发现div carousel下已经有几个div-item=' ',表示有数据。为什么没有显示出来?后来发现页面在获取数据之前就已经初始化了,当然无法显示。当获取数据填充html时,是时候回调reload(options)方法了。
先粘贴HTML代码:
div class=' layui-carousel ' id=' test1 ' lay-filter=' test1 ' div carousel-item=' script id=' charts ' type=' text/html '下面是一个动态遍历代码/脚本/div/div以获取数据代码的反例:
layui.use('carousel ',function(){ var carousel=layui . carousel;//构建实例carousel . render({ elem : ' # test1 ',width : ' 100% '//设置容器宽度,arrow : ' always '//always display arrow/,//,anim : ' up down '///切换动画模式});//下面是大概的代码$。get('请求的URL ',函数(数据){vartpl=$ ('# charts ')。html();第三方物流。render(数据,函数(html) { $('#test1 '))。儿童(' div ')。html(html);});});});解决问题的代码示例:
layui.use('carousel ',function(){ var carousel=layui . carousel;//构造实例varins=carousel . render({ elem : ' # test1 ',width : ' 100% '//设置容器宽度,arrow : ' always '//always display arrow//,//,anim : ' up down '///切换动画模式})//下面是大概的代码$。get('请求的URL ',函数(数据){vartpl=$ ('# charts ')。html();第三方物流。render(数据,函数(html) { $('#test1 '))。儿童(' div ')。html(html);//以下步骤非常重要ins . reload({ elem : ' # test1 ' });//重置转盘});});});至于为什么要用它
$('#test1 ')。儿童(' div ')。html(html);因为div carousel-item=' '加上idname会报告错误,所以html不会以下列方式填充
$('#idname ')。html(html);对layui转盘中的数据没有显示的问题的上述解决方案是边肖与每个人共享的所有内容。希望能给大家一个参考,多支持我们。
版权声明:解决layui轮播数据不显示的情况是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。