利用VUE框架，实现列表分页功能示例代码

2019-11-19 17:58:56

字体：大中小

来源：转载

供稿：网友

先来看一下效果图：

这里写图片描述

功能描述：

1. 点击页面序号跳转到相应页面；

2. 点击单左/单右，向后/向前跳转一个页面；

3. 点击双左/双右，直接跳转到最后一页/第一页；

4. 一次显示当前页面的前三个与后三个页面；

5. 始终显示最后一个页面；

HTML：

 <!-- 分页开始 --><div class="u-pages" style="margin-bottom:20px; margin-top:10px;"> <ul>   <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li>   <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> < </a></li>   <template v-for="index in indexs" >     <li class="{{classRenderer(index)}}">       <a v-on:click="btnClick(index)" >{{index}}</a>     </li>   </template>   <li v-if="showMoreTail" class="crt">..</li>   <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li>   <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">></a></li>   <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>></a></li> </ul></div><!-- 分页结束 -->

HTML方法分析：

1、

<li class="{{classRenderer(index)}}">

classRenderer()方法实现了当点击页面索引是，点击页面获得选中效果

2、

<a v-on:click="btnClick(index)" >{{index}}</a>

btnClick()方法，实现了点击页面索引，跳转到相应页面

showPre showTail

showPre控制跳转到第一页与跳转到前一页的按钮的显示与消除

showTail控制跳转到最后一页与跳转到后一页的按钮的显示与消除

cur

记录当前页序号

jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)

实现按钮跳转功能

JS：

 module.exports = {    data: function () {      return {        cur:1,        showTail:true,        showMorePre: false,        showMoreTail: false,             }    },    methods:{    jumpFirst:function(data){        var $this = this;        data = 1;        $this.cur = data;        if (data == 1 )        {          $this.$set("showPre", false);        }else        {          $this.$set("showPre", true);        }        $this.$am.ajax({          url:window.$ApiConf.api_order_detail_list,          type:'GET',          data:{start: 1},          success: function(data){            console.log(data);            $this.$set("records", data.record.records);            $this.$set("start", data.record.query.start);            $this.$set("total", data.record.query.total);            $this.$set("limit", data.record.query.limit);          }        })        $this.$set("showTail", true);        return data;      },      minus:function(data){        var $this = this;        data--;        $this.cur = data;        $this.$set("showTail", true);        if(data == 1){          $this.$set("showPre", false);        }else{          $this.$set("showPre", true);        }        $this.$am.ajax({          url:window.$ApiConf.api_order_detail_list,          type:'GET',          data:{start: 1 + $this.limit * (data-1) },          success:function(data){            console.log(data);            $this.$set("records", data.record.records);            $this.$set("start", data.record.query.start);            $this.$set("total", data.record.query.total);            $this.$set("limit", data.record.query.limit);          }        })        return data;      },      plus: function(data){        var $this = this;        data++;        $this.cur = data;        $this.$set("showPre", true);        if (data == $this.pageNo)        {          $this.$set("showTail", false);        }else        {          $this.$set("showTail", true);        }        $this.$am.ajax({          url:/* 这里写上你自己请求数据的路径 */,          type:'GET',          data:{start: 1 + $this.limit * (data-1) },          success:function(data){            console.log(data);            $this.$set("records", data.record.records);            $this.$set("start", data.record.query.start);            $this.$set("total", data.record.query.total);            $this.$set("limit", data.record.query.limit);          }        })        return data;      },      classRenderer:function(index){        var $this = this;        var cur = $this.cur;        if(index != cur){          return 'crt';        }        return '';      },      btnClick:function(data){        var $this = this;        if(data == 1){          $this.$set("showPre", false);        }else{          $this.$set("showPre", true);        }        if (data == $this.pageNo)        {          $this.$set("showTail", false);        }else        {          $this.$set("showTail", true);        }        if (data != $this.cur)        {          $this.cur = data;          $this.$am.ajax({            url:window.$ApiConf.api_order_detail_list,            type:'GET',            data:{start: 1 + $this.limit * (data-1) },            success:function(data){              console.log(data);              $this.$set("records", data.record.records);              $this.$set("start", data.record.query.start);              $this.$set("total", data.record.query.total);              $this.$set("limit", data.record.query.limit);            }          })        }      },      jumpTail:function(data){        var $this = this;        data = $this.pageNo;        $this.cur = data;        if (data == $this.pageNo)        {          $this.$set("showTail", false);        }else        {          $this.$set("showTail", true);        }        $this.$am.ajax({          url:window.$ApiConf.api_order_detail_list,          type:'GET',          data:{start: 1 + $this.limit * (data-1) },          success:function(data){            console.log(data);            $this.$set("records", data.record.records);            $this.$set("start", data.record.query.start);            $this.$set("total", data.record.query.total);            $this.$set("limit", data.record.query.limit);          }        })        $this.$set("showPre", true);        return data;      },     computed: {      //*********************分页开始******************************//      indexs: function(){        var $this = this;        var ar = [];        if ($this.cur > 3)        {          ar.push($this.cur - 3);          ar.push($this.cur - 2);          ar.push($this.cur - 1);        }else        {          for (var i = 1; i < $this.cur; i++)          {            ar.push(i);          }        }        if ($this.cur != $this.pageNo)        {          ar.push($this.cur);        }        if ( $this.cur < ( $this.pageNo - 3 ) )        {          ar.push($this.cur + 1);          ar.push($this.cur + 2);          ar.push($this.cur + 3);          if ( $this.cur < ( $this.pageNo - 4 ) )          {            $this.$set("showMoreTail", true);          }        }else        {          $this.$set("showMoreTail", false);          for (var i = ($this.cur + 1); i < $this.pageNo; i++)          {            ar.push(i);          }        }        return ar;      }      //*********************分页结束******************************//    }}

JS功能分析：indexs用于记录一共有多少页面

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

上一篇：JavaScript中localStorage对象存储方式实例分析

下一篇：js中常用的Math方法总结