原创作品转载请注明出处
先来看一下效果图:
功能描述:
1. 点击页面序号跳转到相应页面;
2. 点击单左/单右,向后/向前跳转一个页面;
3. 点击双左/双右,直接跳转到最后一页/第一页;
3. 一次显示当前页面的前三个与后三个页面;
4. 始终显示最后一个页面;
HTML:
<!-- 分页开始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
<ul>
<li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li>
<li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> < </a></li>
<template v-for="index in indexs" >
<li class="{
{
classRenderer(index)}}">
<a v-on:click="btnClick(index)" >{
{
index}}</a>
</li>
</template>
<li v-if="showMoreTail" class="crt">..</li>
<li class="{
{
classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{
{
pageNo}}</a></li>
<li v-if="showTail" class="crt"><a v-on:click="plus(cur)">></a></li>
<li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>></a><