拼接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 += '                                    <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%"><span class="layui-progress-text">50%</span></div>';
　　　　　　itemHtml += '                                    </div>';
　　　　　　initDataList.push(html);
　　　　　　next(initDataList.join(''), page < 10);
　　　　}

});

});

效果如图：

巴特西

拼接html不显示layui进度条解决方法

最新文章

热门文章