js拼接html不显示layui进度条(多个进度条)的2个解决方法

最新有个新需求，要异步拼接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);
　　　}

　　});

});

效果如图：