明霞山资源网 Design By www.htccd.com
本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下
分页插件代码:
<div>
<div class="page">
<div class="pagelist">
<span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span>
<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
<span class="ellipsis" v-show="efont">...</span>
<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
@click="jumpPage(num)">{{num}}</span>
<span class="ellipsis" v-show="ebehind">...</span>
<span :class="{disabled:pend}" class="jump" @click="addPage()">下一页</span>
<span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
<#--<span class="jumppoint">跳转到:</span>-->
<#--<span class="jumpinp"><input type="text" v-model="changePage"></span>-->
<#--<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>-->
</div>
</div>
</div>
vue代码
data: {
current_page: result.resultObj.number + 1, //当前页
pages: result.resultObj.totalPages, //总页数
changePage: '',//跳转页
nowIndex: 0
},
computed: {
show: function () {
return this.pages && this.pages != 1
},
pstart: function () {
return this.current_page == 1;
},
pend: function () {
return this.current_page == this.pages;
},
efont: function () {
if (this.pages <= 7) return false;
return this.current_page > 5
},
ebehind: function () {
if (this.pages <= 7) return false;
var nowAy = this.indexs;
return nowAy[nowAy.length - 1] != this.pages;
},
indexs: function () {
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages -4){
left = Number(this.current_page) - 3;
right = Number(this.current_page) + 3;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage: function (id) {
if (id <= this.pages && id >= 1) {
this.current_page = id;
loadData(this.current_page - 1, size);
}
},
lessPage: function () {
this.current_page--;
loadData(this.current_page - 1, size);
},
addPage: function () {
this.current_page++;
loadData(this.current_page - 1, size);
}
}
使用说明:
直接拷贝即可使用,只需要修改总页数、当前页。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,分页插件
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。