vue分页插件的使用方法_JavaScript

vue分页插件的使用方法

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下

分页插件代码：

<div>
  <div class="page">
   <div class="pagelist">
      <span class="jump" :class="{disabled:pstart}" @click="lesspage()">上一页</span>
      <span v-show="current_page>5" class="jump" @click="jumppage(1)">1</span>
      <span class="ellipsis" v-show="efont">...</span>
      <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
        @click="jumppage(num)">{{num}}</span>
      <span class="ellipsis" v-show="ebehind">...</span>
 
      <span :class="{disabled:pend}" class="jump" @click="addpage()">下一页</span>
      <span v-show="current_page<pages-4" class="jump" @click="jumppage(pages)">{{pages}}</span>
 
     <#--<span class="jumppoint">跳转到：</span>-->
     <#--<span class="jumpinp"><input type="text" v-model="changepage"></span>-->
     <#--<span class="jump gobtn" @click="jumppage(changepage)">go</span>-->
   </div>
  </div>
</div>

vue代码

data: {
  current_page: result.resultobj.number + 1, //当前页
  pages: result.resultobj.totalpages, //总页数
  changepage: '',//跳转页
  nowindex: 0
    },
  computed: {
    show: function () {
     return this.pages && this.pages != 1
   },
  pstart: function () {
    return this.current_page == 1;
   },
  pend: function () {
    return this.current_page == this.pages;
     },
   efont: function () {
    if (this.pages <= 7) return false;
      return this.current_page > 5
     },
   ebehind: function () {
      if (this.pages <= 7) return false;
      var noway = this.indexs;
      return noway[noway.length - 1] != this.pages;
     },
    indexs: function () {
 
      var left = 1,
        right = this.pages,
        ar = [];
   if (this.pages >= 7) {
     if (this.current_page > 5 && this.current_page < this.pages -4）{
        left = number(this.current_page) - 3;
        right = number(this.current_page) + 3;
       } else {
        if (this.current_page <= 5) {
         left = 1;
         right = 7;
        } else {
         right = this.pages;
 
         left = this.pages - 6;
        }
       }
      }
    while (left <= right) {
       ar.push(left);
       left++;
      }
      return ar;
     },
    },
    methods: {
     jumppage: function (id) {
      if (id <= this.pages && id >= 1) {
       this.current_page = id;
       loaddata(this.current_page - 1, size);
      }
     },
    lesspage: function () {
      this.current_page--;
      loaddata(this.current_page - 1, size);
     },
    addpage: function () {
      this.current_page++;
      loaddata(this.current_page - 1, size);
   }
}

使用说明：

直接拷贝即可使用，只需要修改总页数、当前页。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。