如何利用VUE框架实现列表分页功能
小编给大家分享一下如何利用VUE框架实现列表分页功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了古蔺免费建站欢迎大家使用！
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
先来看一下效果图：
功能描述：
1. 点击页面序号跳转到相应页面；
2. 点击单左/单右，向后/向前跳转一个页面；
3. 点击双左/双右，直接跳转到最后一页/第一页；
4. 一次显示当前页面的前三个与后三个页面；
5. 始终显示最后一个页面；
HTML：
<<
<
{{index}}
..
{{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;
}
//*********************分页结束******************************//
}
}看完了这篇文章，相信你对“如何利用VUE框架实现列表分页功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
本文标题：如何利用VUE框架实现列表分页功能
本文网址：
http://bjjierui.cn/article/pddohs.html
