袅袅牧童 首先使用的是layer框架，官网https://layer.layui.com/ 。下载框架，引入对应css和js。
layer的js引用包括两中方式：
1，引用mini.js版，使用对应模块时，以use函数引入：
例如：
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
}); 2，整体引入all.js版，省去use方法。
方式很容易理解，载入all.js肯定占用更多的时间，适用于流量不大的网站；本博客以载入all.js举例。
layer的分页模块
layer的官网虽然有案例，但是对于分页模块的文档方面解释过于简介，模块方向有缺失，对于新用户来说并不容易。
首先html方面分页的容器包括两项：内容（如图ul IdarticleList），页码范围（如图 div IdpageInit）；
在html中写好容器之后，即可在js代码区域引入方法了。
直接代码演示：
layui.laypage.render({
elem: 'pageInit' //页码容器id
,limit:4 //每页项数
,count: NewDialog.length //数据项总数，一般后台ajax传递，本次为直接取全部数据演示，数目不多
,theme:'Id1E9FFF' //css主题选择
,jump: function(obj){ //跳页方法
//模拟渲染
$('IdarticleList').html(function(){ //数据容器填补
if(NewDialog.length == 0){return mt_none_data;} //空值判断
var content = $("IdmtNewDialog").html(), //模板引入
arr = [], thisData = NewDialog.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
item. add_time = layui.util.timeAgo(item.add_time,'onlyDate'); //引入时间转换函数
//这里是你对模板的更改方案；
arr.push(content); //完成填入数据
});
return arr.join('');
});
location.href='Idmt-guide'; //layer的页码跳转不会自动置顶首项，手动置顶
}
});以上代码是最简洁的layer分页方法。
关于时间转换函数
layer的时间转换函数很简单，直接引入变量转换即可，如上文代码：
item. add_time = layui.util.timeAgo(item.add_time,'onlyDate'); //引入时间转换函数
这里说下关于这方面的问题，layer的分页方案，设定了缓存机制（暂时这么理解），对于以上引入时间转换函数，将载入分页方法的数据的时间变量直接转换会存在一个问题，就是你在页码跳转的时候，会对转换过得变量再次进行时间转换：
例如：将 ‘2018-09-06 ’ 转换为 ‘10分钟前’之后，在页码跳转时，二次转换为‘刚刚’，很尴尬。
解决方案也很简单，将变量的时间在转换时，直接定义为新的变量，即可解决：
item. add_time = layui.util.timeAgo(item.add_time,'onlyDate'); //引入时间转换函数 更改为： var NewTime = layui.util.timeAgo(item.add_time,'onlyDate'); //定义变量，引入时间转换函数OK，完毕。
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)