最新有個新需求，要異步拼接html並渲染數據，並且我這邊是用layui的flow.load(流加載)渲染多個進度條。
按官網給出的 element.progress('demo', n+'%'); 就是回顯不出來。
兩種解決方法
一。html拼接完之后加上 element.init();
1.代碼如下:
layui.use(['element', 'flow'], function () {
var element = layui.element,
flow = layui.flow
;
flow.load({
elem: tabId
, isAuto: true
, isLazyimg: true
, done: function (page, next) {
var initDataList = [];
//這里是調用后台接口返回數據代碼
var itemHtml = "";
itemHtml += '<div class="layui-progress coupon-percent" lay-showpercent="true">';
itemHtml += ' <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>';
itemHtml += '</div>';
initDataList.push(html);
next(initDataList.join(''), page < 10);
element.init();
}
});
});
二。
查看了下layui的進度條渲染原理，發現它只是在 calss 為 layui-progress-bar 的節點加上 width 屬性而已，
所以我們在拼接html時補上去就可以回顯了，如果要顯示文字的話就在那個節點把
<span class="layui-progress-text">xx%</span> 這個節點拼接上去。
（這里可以不用添加 element.init(); 也可以回顯）
1.代碼如下
layui.use(['element', 'flow'], function () {
var element = layui.element,
flow = layui.flow
;
flow.load({
elem: tabId
, isAuto: true
, isLazyimg: true
, done: function (page, next) {
var initDataList = [];
//這里是調用后台接口返回數據代碼
var itemHtml = "";
itemHtml += '<div class="layui-progress coupon-percent" lay-showpercent="true">';
itemHtml += '<div class="layui-progress-bar layui-bg-red" lay-percent="50%" style="width: 50%">';
itenHtml += '<span class="layui-progress-text">50%</span></div>';
itemHtml += '</div>';
initDataList.push(html);
next(initDataList.join(''), page < 10);
}
});
});
效果如圖：
