您现在的位置是:首页 >  编程分享 > WEBWEB

使用layer框架分页及时间差转换函数

袅袅牧童 推荐 原创 编程分享 2016-12-20

简介 本篇主要简述下layer框架下简单的调取layer分页模块及将时间转换为“数天前”格式的方法,希望对大家有些帮助


首先使用的是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,完毕。

Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云