解決layui輪播圖有數(shù)據(jù)不顯示的情況
最近接觸了一個(gè)項(xiàng)目，要實(shí)現(xiàn)一個(gè)輪播圖的功能，因?yàn)槭窃谠械捻?xiàng)目上進(jìn)行二次開發(fā)，項(xiàng)目前端用的是layui框架，樓主是后臺(tái)方向，沒怎么接觸過前端，在用layui實(shí)現(xiàn)輪播圖時(shí)，發(fā)現(xiàn)異步從后臺(tái)獲取數(shù)據(jù)，但是輪播圖片不顯示，顯示如下:
用瀏覽器調(diào)試發(fā)現(xiàn)，<div carousel-item="">下面已經(jīng)有幾個(gè)<div>了，說(shuō)明是有數(shù)據(jù)的。那怎么不顯示呢？后來(lái)發(fā)現(xiàn)是在獲取數(shù)據(jù)之前，頁(yè)面已經(jīng)初始化了，當(dāng)然不能顯示啦，這是時(shí)候需要在獲取數(shù)據(jù)填充html時(shí)，回調(diào)reload(options)方法。
先貼上HTML代碼：
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item="">
<script id="charts" type="text/html">
這里是動(dòng)態(tài)遍歷的代碼
</script>
</div>
</div>
獲取數(shù)據(jù)代碼的反例示例：
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造實(shí)例
carousel.render({
elem: '#test1'
,width: '100%' //設(shè)置容器寬度
,arrow: 'always' //始終顯示箭頭
//,anim: 'updown' //切換動(dòng)畫方式
});
//這里是用jQuery異步獲取數(shù)據(jù)的大致代碼
$.get("請(qǐng)求的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;
//建造實(shí)例
var ins = carousel.render({
elem: '#test1'
,width: '100%' //設(shè)置容器寬度
,arrow: 'always' //始終顯示箭頭
//,anim: 'updown' //切換動(dòng)畫方式
});
//這里是用jQuery異步獲取數(shù)據(jù)的大致代碼
$.get("請(qǐng)求的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);
因?yàn)?lt;div carousel-item="">加idname會(huì)報(bào)錯(cuò)，所以沒用下面這種方式填充html
$("#idname").html(html);
以上這篇解決layui輪播圖有數(shù)據(jù)不顯示的情況就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題
- 解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題
- 轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法
- layui使用templet格式化表格數(shù)據(jù)的方法
- layui異步加載table表中某一列數(shù)據(jù)的例子
- Layui表格行工具事件與數(shù)據(jù)回填方法
- layui使用表格渲染獲取行數(shù)據(jù)的例子
- layui-table表復(fù)選框勾選的所有行數(shù)據(jù)獲取的例子
- Layui數(shù)據(jù)表格 前后端json數(shù)據(jù)接收的方法
相關(guān)文章
詳解利用exif.js解決ios手機(jī)上傳豎拍照片旋轉(zhuǎn)90度問題
這篇文章主要介紹了詳解利用exif.js解決ios手機(jī)上傳豎拍照片旋轉(zhuǎn)90度問題，有需要的朋友可以了解一下。2016-11-11
in.js 一個(gè)輕量級(jí)的JavaScript顆粒化模塊加載和依賴關(guān)系管理解決方案
近一年來(lái)，國(guó)內(nèi)外都十分熱衷于異步加載的研究，為了加快頁(yè)面的載入速度，無(wú)阻塞加載Javascript的方法和框架成為了前端開發(fā)的焦點(diǎn)和亮點(diǎn)之一。2011-07-07
這篇文章主要介紹了js事件循環(huán)機(jī)制，并通過實(shí)例分析了用法和技巧，一起學(xué)習(xí)分享下。2017-12-12
這篇文章主要介紹了與iframe進(jìn)行跨域交互的解決方案,本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
JS面試必備之手寫instanceof,深拷貝,節(jié)流和防抖
JavaScript如何實(shí)現(xiàn)手寫instanceof、深拷貝、節(jié)流、防抖也是面試時(shí)常?？嫉降闹R(shí)點(diǎn)，這篇文章為大家進(jìn)行了詳細(xì)介紹，需要的可以參考一下2023-05-05
微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
echarts同一頁(yè)面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁(yè)面中四個(gè)圖表切換的js數(shù)據(jù)交互的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的幫助，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript仿flash遮罩動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例
這篇文章主要介紹了JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
JavaScript三種綁定事件方式及相互之間的區(qū)別分析
這篇文章主要介紹了JavaScript三種綁定事件方式及相互之間的區(qū)別,結(jié)合具體實(shí)例形式分析了javascript事件綁定方式的基本實(shí)現(xiàn)方法與相互之間的區(qū)別,需要的朋友可以參考下2017-01-01