HTML让右侧进度栏消失,拼接html不显示layui进度条解决方法

最新有个新需求，要异步拼接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 += '

';

itemHtml += '

itemHtml += '

';

initDataList.push(html);

next(initDataList.join(''), page < 10);

element.init();

}

});

});

二。查看了下layui的进度条渲染原理，发现它只是在 calss 为 layui-progress-bar 的节点加上 width 属性而已，所以我们在拼接html时补上去就可以回显了，如果要显示文字的话就在那个节点把 xx% 这个节点拼接上去。(这里可以不用

添加 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 += '

';

itemHtml += '　　　　　　　　　　　　　　　　　　　　　　　　

50%

';itemHtml += '

';initDataList.push(html);next(initDataList.join(''), page < 10);}

});

});

效果如图：