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

先来看一下效果图：

功能描述：

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用于记录一共有多少页面
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。