layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案

简介: layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案

1.构建数据容器

                <div class="layui-tab-content">
                    <!--线上报名-->
                    <div class="layui-tab-item layui-show" id="lock_data_online"></div>
                    <!--线下报名-->
                    <div class="layui-tab-item">
                        <div class="layui-tab-item layui-show" id="lock_data_offline"></div>
                    </div>
                </div>

2.layui-tab-content切换并留在当前位置

    //layui切换
    layui.use(['element', 'layer', 'flow'], function () {
        var $ = layui.jquery, element = layui.element, flow = layui.flow;
        //Tabs事件
        element.on('tab(lock)', function (data) {
            location.hash = 'lock=' + $(this).attr('lay-id');
            //线上报名记录
            if (data.index == 0) {}
              //线下报名记录
            if (data.index == 1) {}
        //Hash地址的定位
        var layid = location.hash.replace(/^#lock=/, '');
        element.tabChange('lock', layid);
    });


3.flow流加载

 flow.load({
                    elem: '#lock_data_online'
                    , end: '数据加载完毕'
                    , done: function (page, next) {
                        var lis = [];
                        $.getJSON('./api/api.php?act=getOnLin&token=3cab7ce4142608c0f40c785b5ab5ca24&page=' + page, {}, function (res) {
                            //console.log(res)
                            layui.each(res.data, function (index, item) {
                                //输出数据;
                                lis.push('<div class="layui-card">' +
                                    '                    <div class="layui-card-header lock1">' + item.sign_time + '<div class="layui-btn-group lock2"><span class="layui-btn layui-btn-xs layui-btn-primary">' + getVerifyStatus(item.sign_verify) + '</span><span class="layui-btn layui-btn-xs layui-btn-primary" οnclick="getUserStudyRecord(\'' + item.sign_id + '\',\'' + item.resource_ids + '\',\'' + item.user_eid + '\')">学习进度</span></div></div>' +
                                    '                    <a href="?m=Course&a=courseDetails&act=show&project_id=' + item.project_id + '&course_id=' + item.course_id + '"><div class="layui-card-body" style="display: inline-block;height: 90px;">' +
                                    '                        <div class="lock3"><img src="' + item.course_url + '" alt="" width="80" height="80"></div>' +
                                    '                        <div class="lock4">' +
                                    '                            <p class="layui-elip lock5">' + item.course_name + ' <label style="font-size: 10px;color: red;">' + item.stay_time + '分钟</label></p>' +
                                    '                            <p style="margin-top: 20px;">' +
                                    '                            <div class="layui-progress" lay-showPercent="yes">' +
                                    '                            <div class="layui-progress-bar layui-bg-blue" lay-percent="' + item.learn_progress + '%"></div>' +
                                    '                            </div></p></div>' +
                                    '  </div></a>' +
                                    ' </div>');
                            });
                            next(lis.join(''), page < res.count / 5);
                        });
                    }
                });


在使用html拼接时,发现layui-progress-bar不显示进度条和文本。

显示进度百分比进度条

进度可以自己调节(lay-percent=“?”)支持输入的有普通数字、百分比、分数;

如果不想显示进度的百分比,可以删掉(lay-showpercent);

默认风格进度百分比会在进度条上方显示,大尺寸进度条的百分比会在进度条内部显示;

想要不同尺寸的进度条,只需要在div内添加语法(layui-progress-big);

进度条颜色可自由更改,在div内添加语法(layui-bg-想要更改的颜色);

进度百分比也可自由更改,在div内添加语法(lay-percent=“要更改百分比”);

默认的进度条风格是小的细的,且颜色为绿;

进度条的宽度是100%适配于它的父级元素,如上面的进度条是在一个300px的父容器中。

解决方案:


element.init();,在加载完数据,再次初始化即可。


 next(lis.join(''), page < res.count / 5);
 element.init();

@漏刻有时

相关文章
N..
|
2月前
|
前端开发 JavaScript 开发者
HTML框架
HTML框架
N..
15 1
|
4天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
15 3
|
4天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
14 2
|
5天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
8 0
在线拼接图片工具HTML源码
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
2月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
11 0
|
2月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
19 0
|
2月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
2月前
|
前端开发 JavaScript API
编程笔记 html5&css&js 011 HTML内连框架
编程笔记 html5&css&js 011 HTML内连框架
|
3月前
|
移动开发 开发框架 Java
html一个案例学会所有常用HTML(H5)标签
html一个案例学会所有常用HTML(H5)标签
34 0