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

先来看一下效果图：

功能描述：

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

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

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

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

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

HTML：

 

 

   
 << 
   
 < 

   

   
..
   
{{pageNo}}
   
>
   
>>

 

HTML方法分析： 

1、

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

2、

{{index}} 

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用于记录一共有多少页面

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