html模板
<ul>
<li class="prev" :class="{disabled: search.page == 1}" @click="prev()">
<a href="#">«上一页</a>
</li>
<li :class="[{active: search.page == index(i)}]" v-for="i in Math.min(5,totalPage)"
@click="search.page = index(i)">
<a href="#">{{index(i)}}</a>
</li>
<li class="dotted"><span>...</span></li>
<li class="next" :class="{disabled: search.page == totalPage}" @click="next()">
<a href="#">下一页»</a>
</li>
</ul>
js代码
index(i){
if (this.search.page<=3 || this.totalPage <= 5){
return i;
}else if(this.search.page >= this.totalPage-2){
return this.totalPage-5+i;
}else{
return this.search.page-3+i;
}
},
1.展示多少个正块
如果总页数小于5,就展示‘’总页数‘’个方块;如果总页数大于5,就展示5个方块。
2.方块里面的数字显示什么
a. index方法
html模板的v-for循环里的 i 从1 到5 循环。我们把i用index(i)方法过滤一下,展示到方块上。
index方法是传入i,返回一个数字。该数字就是方块展示的数字。
c. index方法的逻辑
如果 当前页<=3 或 总页数 <=5 ,方块应该展示的数字就应该是1 到 5,或1到总页数。
如果 当前页是后三页,且总页数大于5,方块应该展示的数字是 总页数-5+i
如果 当前页是前三页和后三页之间,且总页数大于5,此时,方块应该展示的的数字是当前页-3+i。
3.点击某个方块,使该方块变成选中状态
给方块绑定一个动态样式,当前页==index(i)时,把这个方块变成选中的样式。
:class="[{active: search.page == index(i)}]"