LayUI分页--定时自动翻页

因为做的是大屏的一个页面,不太方便使用鼠标点击,所以要求自动翻页;

前端用的是layUI,所以分页使用的也是layUI的分页,

jsp是这样的(我只贴出了我的分页部分的代码)

<div class="layui-col-md4 layui-col-lg4">
<div class="zbordersmin dbox4" style="height: 290px">
<div class="layui-row" style="height: 52px">
<div style="height:35px;font-size: 16px;color: #00e8f3; padding-top: 15px;text-align: left;font-weight:lighter;">
<b> <span>自动翻页</span></b>
</div>
</div>
<div id="wish_show" class="layui-row" style="text-align: left;height:200px;padding:5px 15px;overflow-y: auto;">

</div>
<div class="layui-row layui-col-space20" style="margin-top:-15px;text-align:center;">
<div id="wish_page" style="padding:0;"></div>
</div>
</div>
</div>

下面的js部分的代码(省略了引用的部分)

<script>

var wishList = [];//全局的变量,用来接收请求返回的数据
var mylaypage;

var current_page=1;//初始化页码变量为1
function micro_wish() {//数据查询
layui.use(['jquery', 'layer','laypage'], function () {
var $ = layui.$;
mylaypage = layui.laypage;
$.ajax({
url: '/serviceResources/getWish',
type: "POST",
dataType: "json",
async: false,
data: {},
success: function (res) {
wishList = res.data;
}
});
initPage(current_page);//调用分页,传入页码

});

};

function initPage(currPage){
//调用分页
mylaypage.render({
elem: 'wish_page'
,count: wishList.length
,limit: 2
,curr:currPage//关键点,这里是翻到当前页码,可以传入
,prev: '<em><</em>'
,next: '<em>></em>'
,jump: function(obj) {
var wish_str='';
if(obj.count==0){
document.getElementById('wish_show').innerHTML='暂无相关数据';
}else{
thisData = wishList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
wish_str+= '<div>'
+'<div style="display:inline-block;width: 7px;height: 7px;background: #30BAFD;border-radius: 50%;"></div>'
+'<div style="display:inline-block;margin-left:10px;height: 13px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #63CCFF;opacity: 0.5;">'+item.CREATETIME+' '+item.WISHMAN+'--期望完成时间:'+item.WISHFINISHTIME+'</div>'
+'<div style="margin-top:6px;font-size: 16px;font-family: Microsoft YaHei;font-weight: bold;color: #63CDFF; ">'+item.WISHCONTENT+'</div>'
+'<div style="margin-top:6px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; ">'
+item.LINKPHONE
+'</div>'
+'<hr style="margin-top:9px;height: 1px;background: #FFFFFF;opacity: 0.2;">'
+'</div>';
});
document.getElementById('wish_show').innerHTML=wish_str;
}
current_page=obj.curr;//从当前页码赋值给全局页码变量,为解决手动点击某页码之后,自动翻到所点击的下一页
}
})

//为当前页码加1,也就是下次翻到的页码数,如果页码已经等于总页数,那么就重新将页码赋值为1
if(current_page==wishList.length/2){
current_page=1;
}else{
current_page +=1;
}
}

//函数调用

micro_wish();

//定时器去定时调用分页函数,传入当前的全局页码变量

 setInterval(function(){ initPage(current_page) }, 5000);

</script>

posted @ 2020-09-16 11:00  hjLu  阅读(1269)  评论(0编辑  收藏  举报