统一分页

独立的分页统一效果样式：

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();
						    	}
						    		
						    }
						  });
					});  
			  }

 

效果：