js封装页码
我们从后台查询的分页数可能有很多页,而我们一般只会显示几页,例如百度
这就需要我们再次进行封装了,比如我们只显示10页。前端vue,后端pageHelper,技术不同的话,稍微改一下就行了
var app = new Vue({
el:'#app',
data:{
pages:[], //分页页码集合
pageInfo:{} //分页对象
},
methods:{
/**
*获取分页对象
*/
getPage(/*省略*/){
axios.post(/*省略*/).then(function(response){
app.pageInfo = response.data;
})
}
/**
* 封装页码,假如封装10页
*/
buildPages(){
let pageNum = app.pageInfo.pageNum; //当前页
let firstPage = pageNum-5; //首页
let lastPage = pageNum+4; //最后一页
if (firstPage<1){
lastPage+=1-firstPage; //首页小于1,则1-首页,看看偏移多少页,然后最后一页往上偏移相应页数,然后首页变为1
firstPage=1;
}
if (lastPage>app.pageInfo.pages){
firstPage-=(lastPage-app.pageInfo.pages); //最后一页超过总页数,则最后一页-总页数,看看偏移多少页,然后第一页往下偏移相应页数,最后一页则等于总页数
lastPage=app.pageInfo.pages;
}
if (firstPage<1){
firstPage=1; //最后如果第一页小于1,则让第一页变为1
}
for(let i = firstPage;i<=lastPage;i++){
app.pages.push(i); //然后从第一页循环到最后一页,将页码加入页码数组中
}
}
},
created(){
}
})