vue前端动态分页模板(记录)

最新推荐文章于 2021-08-20 08:46:30 发布

lioncatch

最新推荐文章于 2021-08-20 08:46:30 发布

阅读量966

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lioncatch/article/details/106731089

版权

分页用的太多了，写一个模板

功能：

可以自定义分页条长度(奇数，默认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">&laquo;</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">&raquo;</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();
            }
        }