溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
之前一直想要自己試著實現(xiàn)一個分頁器，但是一直拖，今天寫完，大概照著網(wǎng)易云音樂的樣子來完成。這個小例子很簡單，通過這個小例子，可以學(xué)習(xí)到Vue計算屬性的使用，并了解到寫分頁器需要區(qū)分的情況。這篇文章會慢慢從頭來實現(xiàn)這個小例子，相信你一定會學(xué)會，而且看完了我的思路之后說不定會有更棒的思路和想法！
實現(xiàn)的效果是這樣子的：
一、先簡單布局
<template>
<div class="pageContainer">
<ul class="pagesInner">
<li class="page"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
<li class="page" v-for="(item, index) in pages" :key="index">
<span>{{item}}</span>
</li>
<li class="page"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
</ul>
</div>
</template>
<script>
export default {
computed: {
pages() {
return 10;
}
}
};
</script>
效果如下：
有兩個地方說下：
二、理清思路，在這個例子里最重要
這篇文章的例子是參照了網(wǎng)易云音樂里的分頁方法，網(wǎng)易的圖：
它有幾個特點：
分頁的三種情況：
第一種：當(dāng)前頁碼小于等于5的時候
如圖：
這種情況首頁尾頁保留，倒數(shù)第二個頁面為..., 頁碼從頭往后算
第二種情況：當(dāng)前頁碼處于最后5個的時候
如圖：
首頁和尾頁依然保留，第二個頁碼為...，頁碼從最后向前算
第三種情況：頁面處于較中間位置的時候
如圖：
首頁和尾頁都保留，第二個頁碼和倒數(shù)第二個頁碼都為 ... ，同時頁面從當(dāng)前頁碼位置向兩側(cè)算
三、用代碼來實現(xiàn)上面的三種情況
從上面的思路來看，頁碼具體如何呈現(xiàn)由當(dāng)前頁碼的位置決定，所以我們要在data里設(shè)置一個currentPage:1，而計算屬性里用于渲染頁碼的pages通過currentPage來控制，同時還需要一個總頁數(shù)totalPages:50。
先寫第一種情況：
<script>
export default {
data() {
return {
currentPage: 1,
totalPages: 50
}
},
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
}
}
}
};
</script>
效果如下：
寫第二種情況，再加個if：
<script>
export default {
data() {
return {
currentPage: 47,
totalPages: 50
}
},
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
} else if (c >= t - 4) {
return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
}
}
}
};
</script>
把currentPage的值設(shè)為>= 46，效果如下：
把第三種情況加上：
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t] //第一種情況
} else if (c >= t - 4) {
return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t] //第二種情況
} else {
return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, '...', t] //第三種情況
}
}
}
基本就是這樣，已經(jīng)可以通過改變currentPage的值查看分頁器的變化了。
接下來實現(xiàn)點擊相應(yīng)的頁碼來改變currentPage的值，只要寫一個點擊事件再寫一個函數(shù)就好了。
<li class="page"
v-for="(item, index) in pages"
:key="index"
:class="{actived: item === currentPage}" // 給點擊到的當(dāng)前頁碼添加樣式
@click="select(item)" // 添加一個點擊事件
>
...
methods: {
select(item) {
this.currentPage = item
}
}
...
actived: {
border-color: #2d8cf0;
background-color: #2d8cf0;
color: #fff;
}
效果如下：
為了讓當(dāng)前頁碼更清楚，再在頁面上加上當(dāng)前多少頁
<div>當(dāng)前第{{currentPage}}頁</div>
效果如下：
發(fā)現(xiàn)了一bug，就是我們每次點擊的時候，都是將item的具體內(nèi)容傳遞過去改變currentIPage的，但是當(dāng)我們點的 ... 的時候就把它也傳遞過去了，但是它不是我們要的頁碼的數(shù)據(jù)，在計算的時候就出錯了，所以我們需要做一點處理。同時，還有再點擊當(dāng)前頁碼的時候也不必再執(zhí)行select函數(shù)了。
簡單改寫一下select函數(shù)：
select(n) {
if (n === this.currentPage) return
if (typeof n === 'string') return
this.currentPage = n
}
這樣就正常了。
再把兩側(cè)icon向前一頁和向后一頁的功能加上，因為一個是加1一個是減1，所以寫一個函數(shù)傳遞不同的參數(shù)就行了。
<li class="page" @click="prevOrNext(-1)"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
...
<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
...
prevOrNext(n) {
this.currentPage += n
}
效果如下：
呃，邊界問題，當(dāng)currentPage為1時就不能再減了，當(dāng)它為最大時也不能再加了。
改寫一下代碼：
prevOrNext (n) {
this.currentPage += n
this.currentPage < 1
? this.currentPage = 1
: this.currentPage > this.totalPages
? this.currentPage = this.totalPages
: null
}
這下就可以了，如圖：
四、 結(jié)語
寫到這里，這個分頁器基本功能就寫完了，當(dāng)然，我們還可以繼續(xù)封裝，在每次改變currentPage的時候用this.$emit通知外面實現(xiàn)通信，還可以通過props來向內(nèi)傳遞數(shù)據(jù)，比如傳遞totalPages等，這些都是可以繼續(xù)完善的內(nèi)容。最重要的一點，關(guān)于分頁器的具體計算方法，我用的是最笨的方法，所以同志們要是知道更好的辦法記得留言啊~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼