日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何通過vue實現(xiàn)一款簡單通用的翻頁組件

預(yù)覽

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),烏拉特前企業(yè)網(wǎng)站建設(shè),烏拉特前品牌網(wǎng)站建設(shè),網(wǎng)站定制,烏拉特前網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,烏拉特前網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

先上一波效果圖：

 基本元素

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

  • 上一頁
  • ***頁
  • 中間顯示的頁碼
  • ***一頁
  • 下一頁

初始化時需要的配置有：

  • totalPage(總頁數(shù))
  • initPage(初始頁)
  • showPrev(是否顯示上一頁)
  • showNext(是否顯示下一頁)
  • showItems(中間顯示幾頁)
  • showJump(是否顯示跳轉(zhuǎn)到第幾頁)

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

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

基本實現(xiàn)

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

 
 
    
  
  
    2. 
  
  
  2.  
    3.

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

 
 
    
  
  
  1. computed: {
    2. 
  
  
  2.     pages () {
    3. 
  
  
  3.         // 根據(jù)起始頁碼和結(jié)束頁碼得到頁碼數(shù)組
    4. 
  
  
  4.         let getPages = (start,end) => {
    5. 
  
  
  5.             if(start <= 1 || start > end || start >= this.totalPage) {
    6. 
  
  
  6.                 start = 2
    7. 
  
  
  7.             }
    8. 
  
  
  8.             if(end >= this.totalPage || end < start || end <= 1) {
    9. 
  
  
  9.                 end = this.totalPage - 1
    10. 
  
  
  10.             }
    11. 
  
  
  11.             let arr = []
    12. 
  
  
  12.             for(let i = start; i <= end; i++) {
    13. 
  
  
  13.                 arr.push(i)
    14. 
  
  
  14.             }
    15. 
  
  
  15.             return arr
    16. 
  
  
  16.         }
    17. 
  
  
  17.         let counts = this.showItems
    18. 
  
  
  18.         if(this.totalPage < counts + 2) {
    19. 
  
  
  19.             return getPages(2,this.totalPage)
    20. 
  
  
  20.         } else {
    21. 
  
  
  21.             if(this.currentPage <= Math.ceil(counts/2)) {
    22. 
  
  
  22.                 return getPages(2,counts)
    23. 
  
  
  23.             } else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
    24. 
  
  
  24.                 return getPages(this.totalPage + 1 - counts,this.totalPage - 1)
    25. 
  
  
  25.             } else {
    26. 
  
  
  26.                 let half = Math.ceil(counts/2) - 1
    27. 
  
  
  27.                 let end = this.currentPage + half
    28. 
  
  
  28.                 if(counts % 2 === 0) {
    29. 
  
  
  29.                     end++
    30. 
  
  
  30.                 }
    31. 
  
  
  31.                 return getPages(this.currentPage - half,end)
    32. 
  
  
  32.             }
    33. 
  
  
  33.         }
    34. 
  
  
  34.     }
    35. 
  
  
  35. }
    36.

 功能拓展

到這里一個普通的翻頁組件基本上就實現(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配置，由于當mode為params時，跳轉(zhuǎn)需要知道是在哪一個路由下，所以：

 
 
    
  
  
  1. mode: {
    2. 
  
  
  2.     type: String,
    3. 
  
  
  3.     default: 'event' // 'event' | 'query' | 'params'
    4. 
  
  
  4. },
    5. 
  
  
  5. routeName: {
    6. 
  
  
  6.     type: String
    7. 
  
  
  7. }
    8.

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

 
 
    
  
  
  1. go (page) {
    2. 
  
  
  2.     if(page < 1) {
    3. 
  
  
  3.         page = 1
    4. 
  
  
  4.     }
    5. 
  
  
  5.     if(page > this.totalPage) {
    6. 
  
  
  6.         page = this.totalPage
    7. 
  
  
  7.     }
    8. 
  
  
  8.     if(page === this.currentPage) {
    9. 
  
  
  9.         return
    10. 
  
  
  10.     }
    11. 
  
  
  11.     this.currentPage = parseInt(page,10)
    12. 
  
  
  12.     if(this.mode == 'query') {
    13. 
  
  
  13.         let query = this.$route.query
    14. 
  
  
  14.         query.page = this.currentPage
    15. 
  
  
  15.         this.$router.go({query: query})
    16. 
  
  
  16.     } else if(this.mode == 'params') {
    17. 
  
  
  17.         let params = this.$route.params
    18. 
  
  
  18.         params.page = this.currentPage
    19. 
  
  
  19.         this.$router.go({name: this.routeName,params: params})
    20. 
  
  
  20.     } else {
    21. 
  
  
  21.         this.$emit('go-page',{
    22. 
  
  
  22.             page: this.currentPage
    23. 
  
  
  23.         })
    24. 
  
  
  24.     }
    25. 
  
  
  25. }
    26.

這樣基本上就完成了一個簡單且通用的翻頁組件啦，接下里就是發(fā)不到倉庫里供大家使用了。

本文最終實現(xiàn)的翻頁組件已經(jīng)發(fā)布，大家可以看一波源碼：

vue-simple-pager

總結(jié)

總體上講的比較淺顯，希望能有幫助。


當前名稱：如何通過vue實現(xiàn)一款簡單通用的翻頁組件
鏈接地址：http://www.5511xx.com/article/dpcdgje.html