- 技术
- vue实现分页功能
vue实现分页功能
分页功能的实现，数据请求略过。
html
<div class="page" v-if="pageCout > 0">
<ul class="epages">
<li class="page-item" v-if="curPage > 1">
<button href="#9lala" @click="JumpTo(curPage -1)">«</button>
</li>
<li class="page-item" :class="{active: curPage == 1}" @click="JumpTo(1)">
<button>1
</button>
</li>
<li class="page-item" v-show="curPage > 5 && pageCout > 10">
<strong>...
</strong>
</li>
<li class="page-item" :class="{active: curPage == index+offset}"
v-for="(item,index) in middlePages" @click="JumpTo(index+offset)">
<button>{{index+offset}}
</button>
</li>
<li class="page-item" v-show="curPage < bigLimit && pageCout > 10">
<strong>...
</strong>
</li>
<li class="page-item" :class="{active: curPage == pageCout }"
@click="JumpTo(pageCout )" v-if="pageCout > 1">
<button>{{pageCout }}
</button>
</li>
<li class="page-item" :class="{disabled: curPage == pageCout }"
v-if="pageCout > 1 &&curPage < pageCout -1">
<button href="#9lala" @click="JumpTo(curPage +1)">»</button>
</li>
</ul>
</div>
js
computed
: {
middlePages() {
if (this.pageCout
<= 2) {
return 0;
} else if (this.pageCout
> 2 && this.pageCout
<= 10) {
return this.pageCout
- 2;
} else {
return this.curPage
> 999 ? 5 : 8;
}
},
bigLimit() {
return this.middlePages
> 5 ? this.pageCout
- 6 : this.pageCout
- 3;
},
offset() {
if (this.curPage
<= 5) {
return 2;
} else if (this.curPage
>= this.bigLimit
) {
return this.bigLimit
- 2;
} else {
return this.middlePages
> 5 ? this.curPage
- 3 : this.curPage
- 2;
}
}
}
演示效果
码字不易，请点个赞，Thanks♪(･ω･)ﾉ
Processed:
0.017, SQL:
9
