之前一直想要自己試著實(shí)現(xiàn)一個(gè)分頁(yè)器，但是一直拖，今天寫完，大概照著網(wǎng)易云音樂(lè)的樣子來(lái)完成。這個(gè)小例子很簡(jiǎn)單，通過(guò)這個(gè)小例子，可以學(xué)習(xí)到Vue計(jì)算屬性的使用，并了解到寫分頁(yè)器需要區(qū)分的情況。這篇文章會(huì)慢慢從頭來(lái)實(shí)現(xiàn)這個(gè)小例子，相信你一定會(huì)學(xué)會(huì)，而且看完了我的思路之后說(shuō)不定會(huì)有更棒的思路和想法！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供連山網(wǎng)站建設(shè)、連山做網(wǎng)站、連山網(wǎng)站設(shè)計(jì)、連山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、連山企業(yè)網(wǎng)站模板建站服務(wù)，十年連山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)的效果是這樣子的：

一、先簡(jiǎn)單布局

效果如下：

有兩個(gè)地方說(shuō)下：

1. 最前面和最后面兩個(gè)icon用的font awesome的cdn
2. 使用v-for來(lái)進(jìn)行渲染的數(shù)據(jù)用的是計(jì)算屬性里的pages，暫時(shí)寫了一個(gè)數(shù)據(jù)11，所以渲染出了11個(gè)標(biāo)簽

二、理清思路，在這個(gè)例子里最重要

這篇文章的例子是參照了網(wǎng)易云音樂(lè)里的分頁(yè)方法，網(wǎng)易的圖：

它有幾個(gè)特點(diǎn)：

1. 首頁(yè)和尾頁(yè)一直都有
2. 最多時(shí)候有11個(gè)標(biāo)簽頁(yè)，包括兩個(gè) ... ，但是它們不能點(diǎn)擊，所以我也把例子里的頁(yè)碼設(shè)為11
3. 在當(dāng)前頁(yè)變動(dòng)的時(shí)候，頁(yè)碼的形態(tài)也會(huì)發(fā)生變化，總共有三種情況，這個(gè)下面會(huì)細(xì)說(shuō)

分頁(yè)的三種情況：

第一種：當(dāng)前頁(yè)碼小于等于5的時(shí)候

如圖：

這種情況首頁(yè)尾頁(yè)保留，倒數(shù)第二個(gè)頁(yè)面為..., 頁(yè)碼從頭往后算

第二種情況：當(dāng)前頁(yè)碼處于最后5個(gè)的時(shí)候

如圖：

首頁(yè)和尾頁(yè)依然保留，第二個(gè)頁(yè)碼為...，頁(yè)碼從最后向前算

第三種情況：頁(yè)面處于較中間位置的時(shí)候

如圖：

首頁(yè)和尾頁(yè)都保留，第二個(gè)頁(yè)碼和倒數(shù)第二個(gè)頁(yè)碼都為 ... ，同時(shí)頁(yè)面從當(dāng)前頁(yè)碼位置向兩側(cè)算

三、用代碼來(lái)實(shí)現(xiàn)上面的三種情況

從上面的思路來(lái)看，頁(yè)碼具體如何呈現(xiàn)由當(dāng)前頁(yè)碼的位置決定，所以我們要在data里設(shè)置一個(gè)currentPage:1，而計(jì)算屬性里用于渲染頁(yè)碼的pages通過(guò)currentPage來(lái)控制，同時(shí)還需要一個(gè)總頁(yè)數(shù)totalPages:50。

先寫第一種情況：

效果如下：

寫第二種情況，再加個(gè)if：

把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)可以通過(guò)改變currentPage的值查看分頁(yè)器的變化了。

接下來(lái)實(shí)現(xiàn)點(diǎn)擊相應(yīng)的頁(yè)碼來(lái)改變currentPage的值，只要寫一個(gè)點(diǎn)擊事件再寫一個(gè)函數(shù)就好了。

...

methods: {
  select(item) {
    this.currentPage = item
  }
}

...

actived: {
  border-color: #2d8cf0;
  background-color: #2d8cf0;
  color: #fff;
}

效果如下：

為了讓當(dāng)前頁(yè)碼更清楚，再在頁(yè)面上加上當(dāng)前多少頁(yè)

當(dāng)前第{{currentPage}}頁(yè)

效果如下：

發(fā)現(xiàn)了一bug，就是我們每次點(diǎn)擊的時(shí)候，都是將item的具體內(nèi)容傳遞過(guò)去改變currentIPage的，但是當(dāng)我們點(diǎn)的 ... 的時(shí)候就把它也傳遞過(guò)去了，但是它不是我們要的頁(yè)碼的數(shù)據(jù)，在計(jì)算的時(shí)候就出錯(cuò)了，所以我們需要做一點(diǎn)處理。同時(shí)，還有再點(diǎn)擊當(dāng)前頁(yè)碼的時(shí)候也不必再執(zhí)行select函數(shù)了。

簡(jiǎn)單改寫一下select函數(shù)：

select(n) {
  if (n === this.currentPage) return 
  if (typeof n === 'string') return 
  this.currentPage = n
}

這樣就正常了。

再把兩側(cè)icon向前一頁(yè)和向后一頁(yè)的功能加上，因?yàn)橐粋€(gè)是加1一個(gè)是減1，所以寫一個(gè)函數(shù)傳遞不同的參數(shù)就行了。

...



...

prevOrNext(n) {
  this.currentPage += n
}

效果如下：

呃，邊界問(wèn)題，當(dāng)currentPage為1時(shí)就不能再減了，當(dāng)它為最大時(shí)也不能再加了。

改寫一下代碼：

prevOrNext (n) {
 this.currentPage += n
 this.currentPage < 1
 ? this.currentPage = 1
 : this.currentPage > this.totalPages
  ? this.currentPage = this.totalPages
  : null
}

這下就可以了，如圖：

四、 結(jié)語(yǔ)

寫到這里，這個(gè)分頁(yè)器基本功能就寫完了，當(dāng)然，我們還可以繼續(xù)封裝，在每次改變currentPage的時(shí)候用this.$emit通知外面實(shí)現(xiàn)通信，還可以通過(guò)props來(lái)向內(nèi)傳遞數(shù)據(jù)，比如傳遞totalPages等，這些都是可以繼續(xù)完善的內(nèi)容。最重要的一點(diǎn)，關(guān)于分頁(yè)器的具體計(jì)算方法，我用的是最笨的方法，所以同志們要是知道更好的辦法記得留言啊~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。