溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近接觸了一個項目，要實現一個輪播圖的功能，因為是在原有的項目上進行二次開發，項目前端用的是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輪播圖有數據不顯示的情況就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
