html前端js封装分页显示的页码

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(){

	}
})