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();
@漏刻有时
