用Vue寫一個(gè)分頁器的示例代碼
之前一直想要自己試著實(shí)現(xiàn)一個(gè)分頁器,但是一直拖,今天寫完,大概照著網(wǎng)易云音樂的樣子來完成。這個(gè)小例子很簡單,通過這個(gè)小例子,可以學(xué)習(xí)到Vue計(jì)算屬性的使用,并了解到寫分頁器需要區(qū)分的情況。這篇文章會(huì)慢慢從頭來實(shí)現(xiàn)這個(gè)小例子,相信你一定會(huì)學(xué)會(huì),而且看完了我的思路之后說不定會(huì)有更棒的思路和想法!
實(shí)現(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>
效果如下:
有兩個(gè)地方說下:
- 最前面和最后面兩個(gè)icon用的font awesome的cdn
- 使用v-for來進(jìn)行渲染的數(shù)據(jù)用的是計(jì)算屬性里的pages,暫時(shí)寫了一個(gè)數(shù)據(jù)11,所以渲染出了11個(gè)標(biāo)簽
二、理清思路,在這個(gè)例子里最重要
這篇文章的例子是參照了網(wǎng)易云音樂里的分頁方法,網(wǎng)易的圖:
它有幾個(gè)特點(diǎn):
- 首頁和尾頁一直都有
- 最多時(shí)候有11個(gè)標(biāo)簽頁,包括兩個(gè) ... ,但是它們不能點(diǎn)擊,所以我也把例子里的頁碼設(shè)為11
- 在當(dāng)前頁變動(dòng)的時(shí)候,頁碼的形態(tài)也會(huì)發(fā)生變化,總共有三種情況,這個(gè)下面會(huì)細(xì)說
分頁的三種情況:
第一種:當(dāng)前頁碼小于等于5的時(shí)候
如圖:
這種情況首頁尾頁保留,倒數(shù)第二個(gè)頁面為..., 頁碼從頭往后算
第二種情況:當(dāng)前頁碼處于最后5個(gè)的時(shí)候
如圖:
首頁和尾頁依然保留,第二個(gè)頁碼為...,頁碼從最后向前算
第三種情況:頁面處于較中間位置的時(shí)候
如圖:
首頁和尾頁都保留,第二個(gè)頁碼和倒數(shù)第二個(gè)頁碼都為 ... ,同時(shí)頁面從當(dāng)前頁碼位置向兩側(cè)算
三、用代碼來實(shí)現(xiàn)上面的三種情況
從上面的思路來看,頁碼具體如何呈現(xiàn)由當(dāng)前頁碼的位置決定,所以我們要在data里設(shè)置一個(gè)currentPage:1,而計(jì)算屬性里用于渲染頁碼的pages通過currentPage來控制,同時(shí)還需要一個(gè)總頁數(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>
效果如下:
寫第二種情況,再加個(gè)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的值查看分頁器的變化了。
接下來實(shí)現(xiàn)點(diǎn)擊相應(yīng)的頁碼來改變currentPage的值,只要寫一個(gè)點(diǎn)擊事件再寫一個(gè)函數(shù)就好了。
<li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item === currentPage}" // 給點(diǎn)擊到的當(dāng)前頁碼添加樣式 @click="select(item)" // 添加一個(gè)點(diǎn)擊事件 > ... 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,就是我們每次點(diǎn)擊的時(shí)候,都是將item的具體內(nèi)容傳遞過去改變currentIPage的,但是當(dāng)我們點(diǎn)的 ... 的時(shí)候就把它也傳遞過去了,但是它不是我們要的頁碼的數(shù)據(jù),在計(jì)算的時(shí)候就出錯(cuò)了,所以我們需要做一點(diǎn)處理。同時(shí),還有再點(diǎn)擊當(dāng)前頁碼的時(shí)候也不必再執(zhí)行select函數(shù)了。
簡單改寫一下select函數(shù):
select(n) { if (n === this.currentPage) return if (typeof n === 'string') return this.currentPage = n }
這樣就正常了。
再把兩側(cè)icon向前一頁和向后一頁的功能加上,因?yàn)橐粋€(gè)是加1一個(gè)是減1,所以寫一個(gè)函數(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時(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é)語
寫到這里,這個(gè)分頁器基本功能就寫完了,當(dāng)然,我們還可以繼續(xù)封裝,在每次改變currentPage的時(shí)候用this.$emit通知外面實(shí)現(xiàn)通信,還可以通過props來向內(nèi)傳遞數(shù)據(jù),比如傳遞totalPages等,這些都是可以繼續(xù)完善的內(nèi)容。最重要的一點(diǎn),關(guān)于分頁器的具體計(jì)算方法,我用的是最笨的方法,所以同志們要是知道更好的辦法記得留言啊~
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- 利用vue + element實(shí)現(xiàn)表格分頁和前端搜索的方法
- Vue form 表單提交+ajax異步請(qǐng)求+分頁效果
- Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例
- Vue.js實(shí)現(xiàn)分頁查詢功能
- Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁功能
- vuejs2.0實(shí)現(xiàn)一個(gè)簡單的分頁示例
- Vue.js實(shí)現(xiàn)無限加載與分頁功能開發(fā)
- 基于Vue.js的表格分頁組件
- vue iview實(shí)現(xiàn)分頁功能
相關(guān)文章
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級(jí)數(shù)據(jù)改變的,且可以在頁面上做出對(duì)應(yīng)展示,下面這篇文章主要給大家介紹了關(guān)于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關(guān)資料,需要的朋友可以參考下2022-09-09vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04element-ui滾動(dòng)條el-scrollbar置底方式
這篇文章主要介紹了element-ui滾動(dòng)條el-scrollbar置底方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08