vue中怎么實現(xiàn)一個翻頁組件

這篇文章將為大家詳細講解有關(guān)vue中怎么實現(xiàn)一個翻頁組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

首先，翻頁組件(以下稱“pager組件”)一般擁有的元素有：

• 上一頁

• ***頁

• 中間顯示的頁碼

• ***一頁

• 下一頁

初始化時需要的配置有：

• totalPage(總頁數(shù))

• initPage(初始頁)

• showPrev(是否顯示上一頁)

• showNext(是否顯示下一頁)

• showItems(中間顯示幾頁)

• showJump(是否顯示跳轉(zhuǎn)到第幾頁)

這些可以通過vue的props來接收。

另外，pager組件本身需要有一個記錄當(dāng)前頁的currentPage，pages數(shù)組用來容納中間顯示的頁碼，jumpPage綁定輸入的跳轉(zhuǎn)頁碼。

基本實現(xiàn)

對應(yīng)的代碼為：

<template>     <div class="pager-wrapper" v-if="totalPage > 0">         <div class="pager-pages">             <a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)">上一頁</a>             <a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>             <strong v-show="pages[0] > 2">...</strong>             <a v-for="page in pages" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>             <strong v-show="pages[pages.length-1] < totalPage - 1">...</strong>             <a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>             <a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)">下一頁</a>         </div>         <div v-if="showJump" v-show="totalPage > 1" class="pager-jump">             <span>共<em class="jump-total">{{totalPage}}</em>頁 ，跳至</span>             <input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">             <span>頁</span>             <a @click="go(jumpPage)">確定</a>         </div>     </div> </template> <script>   export default {         props: {             totalPage: { // 總頁數(shù)                 type: Number,                 default: 1,                 required: true             },             showItems: { // 顯示出來的頁數(shù)，如: 1 ... 34[5]67 ... 10                 type: Number,                 default: 5             },             showPrev: { // 是否顯示“上一頁”                 type: Boolean,                 default: true             },             showNext: { // 是否顯示“下一頁”                 type: Boolean,                 default: true             },             showJump: { // 是否顯示“跳轉(zhuǎn)”                 type: Boolean,                 default: true             },             initPage: {                 type: Number,                 default: 1             }         },         data () {             return {                 currentPage: 0,                 pages: [],                 jumpPage: 0,             }         },         created () {// 初始化時currentPage賦值             this.currentPage = this.initPage         }         methods: {             go (page) {                 if(page < 1) {                     page = 1                 }                 if(page > this.totalPage) {                     page = this.totalPage                 }                 if(page === this.currentPage) {                     return                 }                 this.currentPage = parseInt(page,10)                 this.$emit('go-page',{                     page: this.currentPage                 })             }         },         watch: {             currentPage (newVal) {                 this.jumpPage = newVal             },             initPage (newVal) {                 if(this.currentPage !== newVal) {                     this.currentPage = newVal                 }             }         }     } </script>

接下來就是pages數(shù)組的值如何獲取到。由于pages始終是跟當(dāng)前頁currentPage以及配置中需要顯示的showItems強相關(guān)的，那么完全可以將pages改為計算屬性：

computed: {     pages () {         // 根據(jù)起始頁碼和結(jié)束頁碼得到頁碼數(shù)組         let getPages = (start,end) => {             if(start <= 1 || start > end || start >= this.totalPage) {                 start = 2             }             if(end >= this.totalPage || end < start || end <= 1) {                 end = this.totalPage - 1             }             let arr = []             for(let i = start; i <= end; i++) {                 arr.push(i)             }             return arr         }         let counts = this.showItems         if(this.totalPage < counts + 2) {             return getPages(2,this.totalPage)         } else {             if(this.currentPage <= Math.ceil(counts/2)) {                 return getPages(2,counts)             } else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {                 return getPages(this.totalPage + 1 - counts,this.totalPage - 1)             } else {                 let half = Math.ceil(counts/2) - 1                 let end = this.currentPage + half                 if(counts % 2 === 0) {                     end++                 }                 return getPages(this.currentPage - half,end)             }         }     } }

功能拓展

到這里一個普通的翻頁組件基本上就實現(xiàn)了(樣式自己可以去定制)。但是很多時候(特別是一些管理后臺)，結(jié)合vue-router做成SPA，通常會有這樣的需求：

翻到某個列表的某一頁之后，點擊某一項到編輯頁，編輯完成后希望能夠返回到跳轉(zhuǎn)之前的那一頁。

這個需求如果僅僅用上面的pager組件，實現(xiàn)起來就不是很方便。也許有人會說結(jié)合vuex可以，但是這樣的話需要在state中記錄下跳轉(zhuǎn)前的頁碼。假如有很多個翻頁列表，就需要記錄多個，這顯然并不優(yōu)雅。

不過因為vue-router實現(xiàn)的優(yōu)雅，我們要滿足上面的需求也很簡單：

首先props上增加mode配置，由于當(dāng)mode為params時，跳轉(zhuǎn)需要知道是在哪一個路由下，所以：

mode: {     type: String,     default: 'event' // 'event' | 'query' | 'params' }, routeName: {     type: String }

然后再在實際跳轉(zhuǎn)的邏輯方法go(page)里面，做點更改：

go (page) {     if(page < 1) {         page = 1     }     if(page > this.totalPage) {         page = this.totalPage     }     if(page === this.currentPage) {         return     }     this.currentPage = parseInt(page,10)     if(this.mode == 'query') {         let query = this.$route.query         query.page = this.currentPage         this.$router.go({query: query})     } else if(this.mode == 'params') {         let params = this.$route.params         params.page = this.currentPage         this.$router.go({name: this.routeName,params: params})     } else {         this.$emit('go-page',{             page: this.currentPage         })     } }

關(guān)于vue中怎么實現(xiàn)一個翻頁組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。