使用 vue2.0 實現一個簡潔的分頁組件

前言

1. 使用 vue-cli 初始化項目

2. 使用 vuex 管理數據

3. node v6.9.2，npm v3.10.9

• 分頁效果預覽：

  • 在線 demo

  • github 地址

  • 分頁效果截圖

分頁原理

• 實現分頁主要依靠兩個參數，偏移量（offset）、限制數（limit）。點擊分頁發送 Ajax 請求，將這兩個參數傳給後端，後端從數據庫篩選出對應的數據返回給前端，前端將獲取到的數據添加到頁面中，分頁組件根據偏移量和限制數顯示對應的頁碼，這是一個簡單地實現分頁的思路。

分頁類型

• 分頁通常分爲兩種類型，一種常常用於移動端的滾動加載，或是一個按鈕點擊便可加載更多。這種分頁實現起來比較簡單，前端僅需定義一個 offset 變量，每次 ajax 請求時 offset += limit，而後將獲取到的內容 append 上去便可。

• 另外一種是顯示總頁數、當前頁數、上一頁、下一頁按鈕，且頁數較多時將中間頁數用省略號表示。這種分頁實現起來稍微複雜一點，但用戶體驗更好，本文討論的就是如何使用 vue 實現這樣的分頁組件。

分頁組件

• 建立 pagination.vue 文件。

  <template>
      <div class="page-wrap">
        <ul v-show="prePage" class="li-page" v-tap="{methods: goPrePage}">上一頁</ul>
        <ul>
          <li v-for="i in showPageBtn" :class="{active: i === currentPage, pointer: i, hover: i && i !== currentPage}"
              v-tap="{methods: goPage, i: i}">
            <a v-if="i" class="notPointer">{{i}}</a>
            <a v-else>···</a>
          </li>
        </ul>
        <ul v-show="nextPage" class="li-page" v-tap="{methods: goNextPage}">下一頁</ul>
      </div>
  
  </template>

• 組件的做用域是獨立的，父組件通訊經過 props 向其傳遞數據，分頁組件經過 $emit 觸發在父組件定義的事件實現和父組件的通訊，所以預設從父組件獲取到需顯示的總數 num 爲 30 , limit 爲 5，固然你也能夠隨意設置這兩個值～

  let that
  export default{
      data(){
        that = this
        return{
          num: 30,
          limit: 5
        }
      }
  }

• 計算幾個變量，在這裏可使用 vue 的計算屬性 computed

  • 總頁數 totalPage 應該等於需顯示的總數除以每頁顯示的個數，並向上取整。

  computed: {
        totalPage() {
          return Math.ceil(that.num / that.limit)
        }
      }

  • 偏移量 offset，由於點擊上下頁、制定頁碼均會改變 offset 變量，父組件也須要用到這個變量發送 ajax 請求，所以使用 vuex 存儲 offset。

  // pagination.vue
      computed: {
        offset() {
            return that.$store.state.offset
        }
      }

  • 當前頁面 currentPage，當前頁面是比較重要的一個變量，顯示用戶當前所處頁數，已知偏移量和每頁顯示數量能夠得出當前頁面是兩者的餘數向上取整，由於頁數不從0開始，所以

  computed: {
        currentPage() {
          return Math.ceil(that.offset / that.limit) + 1
        }
      }

  • 是否顯示上一頁按鈕 prePage，由於在首頁的時候偏移量爲0，所以只要偏移量不等於0則當前頁面確定不在第一頁，則顯示上一頁按鈕，而且 num 不等於 0。

  coumputed: {
        prePage() {
          return that.offset !== 0 && that.num
        }
      }

  • 是否顯示下一頁按鈕 nextPage，這個也很好理解，只要偏移量和每頁顯示的個數相加小於需顯示的總數，則顯示下一頁按鈕，而且 num 不等於 0。

  computed: {
        nextPage() {
          return (that.offset + that.limit < that.num) && that.num
        }
      }

  • 頁碼計算 showPageBtn，頁碼計算是這個分頁組件的核心內容，基本思路是當總頁數不大於5時，顯示所有頁碼；當總頁數大於5時，始終顯示首尾頁碼，噹噹前頁碼距首頁小於2時，顯示前三頁頁碼和省略號；噹噹前頁碼距尾頁小於2時，顯示後三頁頁碼，噹噹前頁碼距首頁等於2時，顯示前四頁頁碼和省略號；噹噹前頁碼距尾頁等於2時，顯示後四頁頁碼和省略號；噹噹前頁碼距首頁大於3且距尾頁大於3時，顯示當前頁碼和當前頁碼的前一頁和後一頁，兩邊各有一個省略號；在這裏咱們使用0表明省略號

  computed: {
        showPageBtn() {
            let pageNum = that.totalPage,
                index = that.currentPage,
                arr = []
            if (pageNum <= 5) {
              for(let i = 1; i <= pageNum; i++) {
                arr.push(i)
              }
              return arr
            }
            if (index <= 2) return [1,2,3,0,pageNum]
            if (index >= pageNum -1) return [1,0, pageNum -2, pageNum -1, pageNum]
            if (index === 3) return [1,2,3,4,0,pageNum]
            if (index === pageNum -2) return [1,0, pageNum-3, pageNum-2, pageNum-1, pageNum]
            return [1,0, index-1, index, index + 1, 0, pageNum]
          }
      }

• 跳轉事件，分別點擊上一頁、下一頁和指定頁碼。

methods: {
      goPage(params) {
        if (params.i === 0 || params.i === that.currentPage) return
        that.$store.commit('GO_PAGE', (params.i-1) * that.limit)
        that.$emit('getNew')
      },
      goPrePage() {
        that.$store.commit('PRE_PAGE', that.limit)
        that.$emit('getNew')
      },
      goNextPage() {
        that.$store.commit('NEXT_PAGE', that.limit)
        that.$emit('getNew')
      }
    }

vuex 部分

• 在此介紹一下 vuex 部分的實現，學習了二哲大大的 vuex 部分的結構。在 src 目錄下（和 components 目錄平級），新建 store 目錄，其中 index.js 文件傳入 mutation，初始化 vuex；

  // vuex store/index.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  import mutations from './mutations'
  
  Vue.use(Vuex);
  
  const state = {
  offset: 0
  };
  
  export default new Vuex.Store({
  state,
  mutations
  })

• mutation-types.js 記錄全部的事件名，其實這個文件最大的好處是能讓咱們更直觀地管理全部的 vuex 方法，它的優勢會在項目複雜後凸顯出來，項目複雜時咱們可能會使用 vuex 存儲不少數據、定義不少方法，這時 mutation-types.js 就能更好更直觀地管理這些方法。這也是一種設計理念嘛，有利於後期維護。

  // mutation-types.js
  export const PRE_PAGE = 'PRE_PAGE'
  export const NEXT_PAGE = 'NEXT_PAGE'
  export const GO_PAGE = 'GO_PAGE'

• mutation.js 這是 vuex 的核心文件，註冊了實現的全部事件，咱們定義了點擊上一頁、下一頁和跳轉到指定頁面的方法。

  // mutation.js
  import * as types from './mutation-types'
  
  export default {
  // 分頁 上一頁
  [types.PRE_PAGE] (state, offset) {
    state.offset -= offset
  },
  // 分頁 下一頁
  [types.NEXT_PAGE] (state, offset) {
    state.offset += offset
  },
  // 分頁 跳轉到指定頁碼
  [types.GO_PAGE] (state, offset) {
    state.offset = offset
  }
  };

how to run

$ npm install 

$ npm run dev

// 訪問 http://localhost:8088/index.html

最後打個小廣告? ๑乛◡乛๑
個人我的網站：https://minemine.cc/
github 地址：https://github.com/luyilin