独立的分页统一效果样式:
1,更新nc.scss
2,往分页盒子里添加类ds_nc_pages
<div id="demo2" class="ds_nc_pages"></div>
getPage(){//渲染
let _this=this;
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage,layer = layui.layer;
laypage.render({
elem: 'demo2'
,limit:_this.parms.pageSize
,count:_this.common.total
,groups:4
,theme: '#D40000'
,first: '首页'
,prev: "<i class='iconfont icon-left'></i>"
,next: "<i class='iconfont icon-right'></i>"
,last:"末页"
,layout:['prev','first','page','next','last']
,jump:function(obj,first){
if(!first){
_this.parms.pageNum = obj.curr;
_this.getlist();
}
}
});
});
}
追加:不是在组件中的时候,直接在页面中
/*统一分页*/
.ds_nc_pages{font-size: 14px;}
.ds_nc_pages .layui-laypage a{
font-size: 14px;
width: 40px;
height: 40px;
line-height: 40px;
background: #F8F8FA;
border-radius: 3px;
margin-left: 5px;
margin-right: 5px;
padding: 0;
box-sizing: border-box;
border: none;
text-align: center;
}
.ds_nc_pages .layui-laypage a:hover {
color: #fff;
background-color: #D40000;
}
.ds_nc_pages .layui-laypage span{
font-size: 14px;
margin-left: 5px;
margin-right: 5px;
width: 40px;
height: 40px;
line-height: 40px;
box-sizing: border-box;
border: none;
}
.ds_nc_pages .layui-laypage .layui-laypage-spr{
border: none;
font-size: 14px;
width: 14px;
padding: 0;
box-sizing: border-box;
border: none;
background: transparent;
line-height: 36px;
}
.ds_nc_pages .layui-laypage-prev{
border: none;
font-weight: 600;
}
.ds_nc_pages .layui-laypage-next{
border: none;
font-weight: 600;
}
.ds_nc_pages .layui-laypage .layui-laypage-first{
width: 62px;
}
.ds_nc_pages .layui-laypage .layui-laypage-last{
width: 62px;
}
20200720追加,自定义页面分页样式-2
步骤1-引入
步骤2-渲染方法
function getPage(){//渲染
let _this=this;
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage,layer = layui.layer;
laypage.render({
elem: 'demo2'
,limit:parms.pageSize
,count:parms.total
,groups:4
,theme: '#CD0911'
// ,first: '首页'
,prev: "<i class='iconfont icon-left'></i>"
,next: "<i class='iconfont icon-right'></i>"
// ,last:"末页"
,layout:[ 'prev', 'page', 'next','count', 'skip','limit']
,jump:function(obj,first){
if(!first){
console.log(obj);
parms.pageNum = obj.curr;
parms.pageSize = obj.limit;
showlist();
}
}
});
});
}
效果: