解决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 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
js实现三角形粒子运动
Sep 22 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php 301转向实现代码
2008/09/18 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
django 发送手机验证码的示例代码
2018/04/25 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python实现石头剪刀布游戏
2021/01/20 Python
C语言如何决定使用那种整数类型
2016/11/26 面试题
什么是反射
2012/03/17 面试题
Ajax的工作原理
2015/12/04 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
元旦晚会感言
2014/03/12 职场文书
销售主管竞聘书
2014/03/31 职场文书
跑操口号
2014/06/12 职场文书
幼儿园见习报告
2014/10/30 职场文书
刑事法律意见书
2015/06/04 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
行为习惯主题班会
2015/08/14 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技