分页用的太多了，写一个模板
功能：
- 可以自定义分页条长度(奇数，默认5)，可以自定义一页数据的数量(默认15)
- 分页条长度为自定义分页条长度，并且分页栏的页码可以在点击时变换，保持当前页码居中(比如分页条长度为5，总页数有10页 ，当前页码为1，2时，如果已经到最前方或最后方，不能变换，同理后两个9，10也不能变换，点击的页码为6时，因为分页条长度为5，所以显示的应该是45678)，
- 当前页码高亮
- 每次点击分页栏后都会调用一个方法传入点击的页码，你可以在这个函数里发送ajax请求修改页面数据
效果：
总页码为7
初始
点击4后
点击5后
点击7后
点击左按钮后
再次点击左按钮后
再次点击左按钮后
点击2后
点击左按钮后
怎样使用
- 手动指定每页大小pageSize，和分页栏长度cutBarLength
- 在setTotalPage函数的内部，想办法赋值给totalPage一个总页数，你可以用ajax请求数据库返回总页数赋值给this.totalPage，毕竟我必须知道你的总页数，才能自动构造分页条,所以这一项必须做
- 随后在 doPageCutSearch(pageNum)这个方法内写一些你想干的事情就完了，每次点击分页栏后都会调用这个方法传入点击的页码，你可以在这个函数里发送ajax修改页面数据
代码实例
方法：
属性：
代码：
<template id="hotMessageList">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous" @click.prevent="dealLeftRightBar('left')">
<span aria-hidden="false">«</span>
</a>
</li>
<li v-for="(item,index) in dataCutBar" >
<a @click.prevent="dealCutPageMessage(item)" :class="{cutBarDisplay:item==activePage}">{
{item}}</a>
</li>
<li>
<a href="#" aria-label="Next" @click.prevent="dealLeftRightBar('right')">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</template>
const hotMessageList = {
template:"#hotMessageList",
data:function(){
return {
//分页定制信息(需要初始改变)
cutBarLength:5,//分页条长度，一定要设置成奇数
pageSize:3,//分页每页大小
//分页数据(不可修改)
dataCutBar:[],
doNotMoveCount:[],
totalPage:1,
activePage:1,
firstClickDex:true
}
},
methods:{
//页面开始时加载做的初始化任务，光用的不用看
initCutPageData(){
//初始化设置分页条[1，2，3，4，5。。。]
for(let i=0;i<this.cutBarLength;i++){
this.dataCutBar.push(i+1)
}
this.setTotalPage();
},
//设置初始化页码，此方法会在页面初始化时调用
setTotalPage(){
//这里需要给 this.totalPage 赋值
//下面是举例
//去服务器看下有多少条数据并赋值
axios.get("http://localhost:8080/test/getHotMessagePageCutTotalCount?"+"pageSize="+this.pageSize,{
}).then(resp=>{
this.totalPage=resp.data.totalPage
}).catch(error=>{
})
},
//初始化不动函数 ，光用的不用看
initDotMoveData(){
if(this.firstClickDex){
//初始化不要移动的页码
for(let i=0;i<(this.cutBarLength-1)/2;i++){
console.log(this.totalPage)
this.doNotMoveCount.push(i+1)
this.doNotMoveCount.push(this.totalPage-i)
}
this.firstClickDex=false
}
},
//当分页条中间信息被点击时触发此函数，光用的不用看
dealCutPageMessage(pageNum){
//初始化不动数函数
this.initDotMoveData();
//如果是当前页则不做处理
if(pageNum==this.activePage){
return;
}
let ifMove=true;
//判断是否需要改变分页数组，说白了就是看你按下的页码是不是不动数组里面的
for(let i = 0 ;i<this.doNotMoveCount.length;i++){
if(pageNum==this.doNotMoveCount[i]){
ifMove=false;
break;
}
}
//需要动就动一下
if(ifMove==true){
//改变次数
let count = (this.cutBarLength-1)/2;
//创建新数组
let newDataCutBar = [];
//下面三个是往新数组里添加
for(let i=count;i>0;i--){
newDataCutBar.push(pageNum-i)
}
newDataCutBar.push(pageNum);
for(let i=0;i<count;i++){
newDataCutBar.push(pageNum+i+1)
}
//将新数组赋值
this.dataCutBar=newDataCutBar
}else{
//这里是不需要改变，但是还有一种情况2，3，4，5，6 ；2是不动数组，但点击2应该让数组往前移一位
//判断是否已经接近临界了，也就是说判断是否我们的框还有没矿住的数据，
if(pageNum<this.dataCutBar[(this.cutBarLength-1)/2]){
//判断是否前方有值
if(this.dataCutBar[0]!=1){
//往前方推进1格
let newDataCutBar = [];
for(let i=0;i<this.dataCutBar.length;i++){
newDataCutBar[i]=this.dataCutBar[i]-1
}
this.dataCutBar=newDataCutBar
}
}else if(pageNum>this.dataCutBar[(this.cutBarLength-1)/2]){
//判断是否后方有值
if(this.dataCutBar[this.dataCutBar.length-1]!=this.totalPage){
//往后方推进1格
let newDataCutBar = [];
for(let i=0;i<this.dataCutBar.length;i++){
newDataCutBar[i]=this.dataCutBar[i]+1
}
this.dataCutBar=newDataCutBar
}
}
}
this.activePage=pageNum
//调用数据库
this.doPageCutSearch(this.activePage);
},
//当左右按钮被按下时，光用的不用看
dealLeftRightBar(dex){
//初始化不动数函数
this.initDotMoveData();
if(dex=='right'){
//判断是否后方有值
if(this.dataCutBar[this.dataCutBar.length-1]!=this.totalPage){
//可以往后动，但是先判断下当前的数是否是不动数，如果是，则光移动下当前页数就可以
for(let i = 0 ;i<this.doNotMoveCount.length;i++){
if(this.activePage==this.doNotMoveCount[i]){
this.activePage=this.activePage+1
this.doPageCutSearch(this.activePage);
return;
}
}
//往后方推进1格
let newDataCutBar = [];
for(let i=0;i<this.dataCutBar.length;i++){
newDataCutBar[i]=this.dataCutBar[i]+1
}
this.dataCutBar=newDataCutBar
//将现在的角标移动
this.activePage=this.activePage+1
}else{
//后方没值，但是判断下active是否已经到达了最后
if(this.activePage!=this.totalPage){
this.activePage=this.activePage+1
}
}
}else{
//前方的值不是1，说明前面还有东西没显示
if(this.dataCutBar[0]!=1){
//可以往前动，但是先判断下当前的数是否是不动数，如果是，则光移动下当前页数就可以
for(let i = 0 ;i<this.doNotMoveCount.length;i++){
if(this.activePage==this.doNotMoveCount[i]){
this.activePage=this.activePage-1
this.doPageCutSearch(this.activePage);
return;
}
}
//往前方推进1格
let newDataCutBar = [];
for(let i=0;i<this.dataCutBar.length;i++){
newDataCutBar[i]=this.dataCutBar[i]-1
}
this.dataCutBar=newDataCutBar
//将现在的角标移动
this.activePage=this.activePage-1
}else{
//前方没值，但是判断下active是否已经到达了最前面
if(this.activePage!=1){
this.activePage=this.activePage-1
}
}
}
this.doPageCutSearch(this.activePage);
},
//每次点击分页栏时会调用此方法(你可以去数据库查消息)
doPageCutSearch(pageNum){
this.getCutPageData();
}
},
mounted(){
//分页条初始化
this.initCutPageData();
}
}