盗墓笔记txt全集下载,盗墓笔记第二季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

如何通過(guò)vue實(shí)現(xiàn)一款簡(jiǎn)單通用的翻頁(yè)組件

預(yù)覽

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

先上一波效果圖：

基本元素

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

上一頁(yè)
***頁(yè)
中間顯示的頁(yè)碼
***一頁(yè)
下一頁(yè)

初始化時(shí)需要的配置有：

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

這些可以通過(guò)vue的props來(lái)接收。

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

基本實(shí)現(xiàn)

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

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

 
 
  
  computed: {
  
      pages () {
  
          // 根據(jù)起始頁(yè)碼和結(jié)束頁(yè)碼得到頁(yè)碼數(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)
  
              }
  
          }
  
      }
  
  }

功能拓展

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

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

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

不過(guò)因?yàn)関ue-router實(shí)現(xiàn)的優(yōu)雅，我們要滿(mǎn)足上面的需求也很簡(jiǎn)單：

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

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

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

 
 
  
  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
  
          })
  
      }
  
  }

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

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

vue-simple-pager

總結(jié)

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

網(wǎng)站名稱(chēng)：如何通過(guò)vue實(shí)現(xiàn)一款簡(jiǎn)單通用的翻頁(yè)組件
路徑分享：http://www.fisionsoft.com.cn/article/dpcdgje.html

新聞中心

其他資訊