利用VUE框架，实现列表分页功能示例代码
发布时间：2020-12-17 03:04:47 所属栏目：百科 来源：网络整理
导读：先来看一下效果图： 功能描述： 1. 点击页面序号跳转到相应页面； 2. 点击单左/单右，向后/向前跳转一个页面； 3. 点击双左/双右，直接跳转到最后一页/第一页； 4. 一次显示当前页面的前三个与后三个页面； 5. 始终显示最后一个页面； HTML： li v-if="showM
|
先来看一下效果图：
功能描述： 1. 点击页面序号跳转到相应页面； 2. 点击单左/单右，向后/向前跳转一个页面； 3. 点击双左/双右，直接跳转到最后一页/第一页； 4. 一次显示当前页面的前三个与后三个页面； 5. 始终显示最后一个页面； HTML： <li v-if="showMoreTail" class="crt">.. <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}} <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">> <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>> HTML方法分析： 1、 classRenderer()方法实现了当点击页面索引是，点击页面获得选中效果 2、 btnClick()方法，实现了点击页面索引，跳转到相应页面 showPre showTailshowPre控制跳转到第一页与跳转到前一页的按钮的显示与消除 showTail控制跳转到最后一页与跳转到后一页的按钮的显示与消除 cur记录当前页序号 jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)实现按钮跳转功能 JS： }else{
$this.$set("showPre",true);
}
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,data:{start: 1 + $this.limit * (data-1) },success:function(data){
console.log(data);
$this.$set("records",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:/* 这里写上你自己请求数据的路径 */,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",true);
}
if (data == $this.pageNo)
{
$this.$set("showTail",true);
}
if (data != $this.cur)
{
$this.cur = data;
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,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",data.record.query.limit);
}
})
$this.$set("showPre",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用于记录一共有多少页面 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
