在网站中经常会遇到展示的列表过多,页面会变得很长,这样很不美观。所以把内容分页展示是很普遍的做法。在这里我分享一个vue2写的分页小组件,代码不多,在需要用到的地方import一下,通过props给它传几值就能用了。
外观如图所示:
点击左移按钮,按钮选框左移动;点击右移按钮,按钮选框右移动;点击首页按钮,选框回到第一个按钮;点击尾页按钮,按钮选框选中最后一个页数按钮。在跳转页输入框输入页码数,点击回车键,直接跳转到相应页。
可以限定按钮在页面上的个数(默认最多16,超出部分隐藏)
隐藏按钮后点击尾页按钮的效果
跳转到相应页面的效果
提示:组件样式使用的是less
全部代码如下(部分注释):
<template>
<div class="choosePages">
<a href="javascript:;" class="firstPage" @click="toFirst">首页</a><a
href="javascript:;" class="last" @click="chooseBtnLast"><i></i></a><a
href="javascript:;"v-for="item in showBtns" :class="{pageNum : chooseBtnIndex === item }" @click="clickBtn(item)">{{item}}</a><a
href="javascript:;" class="next" @click="chooseBtnNext"><i></i></a><a
href="javascript:;" class="lastPage" @click="toLast">尾页</a><span
class="hint">跳转到</span><input type="text" v-model="pageIndex" @keyup="goIndex"><span>页</span><span>共{{btns.length}}页</span>
</div>
</template>
<script>
export default {
props:{
//展示内容的列表总个数
listsNum:{
type:Number,
default:90,
},
//每页展示的内容列表个数
itemsNum:{
type:Number,
default:5,
},
//选中的对应页处理函数
getNextPage:{
type:Function,
default:function(index){
console.log(index)
}
}
},
data(){
return {
btns : [],
showBtns : [],
chooseBtnIndex :1, //页码
lengthBtns : 16, //按钮最多在页面上的展示个数
overNum:0,
pageIndex:'1',
}
},
created() {
this.createBtns(this.listsNum);
},
computed: {
},
methods: {
//跳转页面
goIndex(e){
if(e.keyCode !== 13 || +this.pageIndex > this.btns.length){
return;
}
console.log(this.pageIndex)
this.chooseBtnIndex = +this.pageIndex;
this.getPageMessage ();
if(+this.pageIndex > this.lengthBtns){ //选择的页面大于显示个数限制
this.overNum = +this.pageIndex - this.lengthBtns;
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}else{
this.overNum=0;
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}
},
//5个列表为一页
createBtns(n){
let length = 0;
if(n>this.itemsNum){
length = parseInt(n/this.itemsNum);
if(parseInt(n%this.itemsNum)>0){
length = length + 1;
}
for(let i=0;i<length;i++){
this.btns.push(i+1);
}
if(this.btns.length>this.lengthBtns){ //按钮长度不能大于长度设定值
this.showBtns = null;
this.showBtns = this.btns.slice(0,this.lengthBtns);
}else{
this.showBtns = null;
this.showBtns = this.btns;
}
}else {
return;
}
},
getPageMessage (){
//请求选择的页面信息
console.log( '请求的第页:'+this.chooseBtnIndex);
this.getNextPage(this.chooseBtnIndex);
},
clickBtn(index){
this.chooseBtnIndex = index;
this.getPageMessage ();
},
chooseBtnLast(){ //前一个按钮
if(this.chooseBtnIndex === 1){
return
}
this.chooseBtnIndex--;
this.getPageMessage ();
if(this.overNum>0){ //按钮长度不能大于长度设定值
this.overNum--;
if(this.overNum < 0){
return
}
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}
},
chooseBtnNext(){ //后一个按钮 向后移动
if(this.chooseBtnIndex === this.btns.length){
return
}
this.chooseBtnIndex++;
this.getPageMessage ();
if(this.chooseBtnIndex>this.lengthBtns){ //按钮长度不能大于长度设定值
this.overNum++;
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}
},
toFirst(){
if(this.chooseBtnIndex === 1){
return
}
this.chooseBtnIndex=1;
this.getPageMessage ();
if(this.overNum>0){ //按钮长度不能大于长度设定值
this.overNum=0;
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}
},
toLast(){
if(this.chooseBtnIndex === this.btns.length){
return
}
this.chooseBtnIndex=this.btns.length;
this.getPageMessage ();
if(this.btns.length>this.lengthBtns){ //按钮长度不能大于长度设定值
this.overNum = this.btns.length - this.lengthBtns;
this.showBtns = null;
this.showBtns = this.btns.slice(this.overNum,this.lengthBtns+this.overNum);
}
}
},
}
</script>
<style scoped lang="less" rel="stylesheet/less">
.choosePages{
text-align: center;
margin: 34px 0;
a{
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
box-sizing: border-box;
border: 1px solid #999;
margin-right: 10px;
color:#333;
background: #fff;
font-size: 13px;
i{
display: inline-block;
width: 10px;
height: 12px;
}
}
.last{
i{
background: url("../../../assets/img/icon_last@2x.png") no-repeat 0 0;
background-size: 10px 12px;
}
&:hover{
background: #f2f2f2;
}
}
.next{
i{
background: url("../../../assets/img/icon_next@2x.png") no-repeat 0 0;
background-size: 10px 12px;
}
&:hover{
background: #f2f2f2;
}
}
.pageNum{
background: #000;
border: 1px solid #000;
color: #fff;
}
.firstPage,.lastPage{
width: 45px;
&:hover{
background: #f2f2f2;
border: 1px solid #666;
}
}
.lastPage{
margin-right: 0;
}
span{
color:#333;
font-size: 13px;
margin-left: 5px;
margin-right: 5px;
}
.hint{
margin-left: 15px;
}
input{
width: 26px;
text-align: center;
}
}
</style>