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

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

先来看一下效果图：

功能描述：

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

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

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

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

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

HTML：

{{index}}

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);

}

$tpYIZQjEHWhis.$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++;

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。