解决layui轮播图有数据不显示的情况


Posted in Javascript onSeptember 16, 2019

最近接触了一个项目,要实现一个轮播图的功能,因为是在原有的项目上进行二次开发,项目前端用的是layui框架,楼主是后台方向,没怎么接触过前端,在用layui实现轮播图时,发现异步从后台获取数据,但是轮播图片不显示,显示如下:

解决layui轮播图有数据不显示的情况

用浏览器调试发现,<div carousel-item="">下面已经有几个<div>了,说明是有数据的。那怎么不显示呢?后来发现是在获取数据之前,页面已经初始化了,当然不能显示啦,这是时候需要在获取数据填充html时,回调reload(options)方法。

先贴上HTML代码:

<div class="layui-carousel" id="test1" lay-filter="test1">
 <div carousel-item="">
  <script id="charts" type="text/html">
    这里是动态遍历的代码
  </script>
 </div>
</div>

获取数据代码的反例示例:

layui.use('carousel', function(){
 var carousel = layui.carousel;
 //建造实例
 carousel.render({
  elem: '#test1'
  ,width: '100%' //设置容器宽度
  ,arrow: 'always' //始终显示箭头
  //,anim: 'updown' //切换动画方式
 });
 
 //这里是用jQuery异步获取数据的大致代码
 $.get("请求的URL",function (data) {
      var tpl = $("#charts").html();
      laytpl(tpl).render(data,function (html) {
        $("#test1").children('div').html(html);
      });
    });
});

解决问题的代码示例:

layui.use('carousel', function(){
 var carousel = layui.carousel;
 //建造实例
 var ins = carousel.render({
  elem: '#test1'
  ,width: '100%' //设置容器宽度
  ,arrow: 'always' //始终显示箭头
  //,anim: 'updown' //切换动画方式
 });
 
 //这里是用jQuery异步获取数据的大致代码
 $.get("请求的URL",function (data) {
      var tpl = $("#charts").html();
      laytpl(tpl).render(data,function (html) {
        $("#test1").children('div').html(html);
        //下面这步很重要
         ins.reload({elem: '#test1'});//重置轮播图
      });
    });
});

至于为啥用

$("#test1").children('div').html(html);

因为<div carousel-item="">加idname会报错,所以没用下面这种方式填充html

$("#idname").html(html);

以上这篇解决layui轮播图有数据不显示的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
js实现简单的随机点名器
Sep 17 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 #Javascript
关于Layui Table隐藏列问题
Sep 16 #Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 #Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 #Javascript
解决微信小程序中的滚动穿透问题
Sep 16 #Javascript
微信小程序左滑删除实现代码实例
Sep 16 #Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
You might like
追求程序速度,而不是编程的速度
2008/04/23 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
js验证表单第二部分
2006/11/25 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python 硬币兑换问题
2019/07/29 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
英国手机零售商:Metrofone
2019/03/18 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
时尚女魔头观后感
2015/06/04 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
python函数的两种嵌套方法使用
2022/04/02 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript