前言
web項目在由混合渲染演變成前後端完全分離之後，很多功能的實現也越來越倚重於前端，如我們接下來要談到的數據分頁控制。在典型的數據分頁控制組件中，我們需要知道數據的當前偏移量（也可以叫當前頁碼，兩者之間可以進行簡單轉換）、數據總數、每頁展示數據數。當然還有當前頁碼的自定義css類，渲染模板等，這個暫且不討論，我們只實現核心的功能：數據分頁導航。下圖是本文最終要實現的效果預覽：
解釋一下上圖的導航工作原理：我們將分頁導航分為5部分，從左到右依次為：前向、左中、當前、右中、後向。
左中和右中部分會隨著當前頁碼的變化而呈現不同的展示方式，但它們兩者邏輯是相同的，主要是邊界的判定。以左中為例：當前向和當前之間的頁碼數不多於三個時，完全顯示中間的所有頁碼，如下圖：
當前向和當前之間的頁碼數多於三個時，左中第一個頁碼用…代替，表示前向和左中部分有更多未展開頁碼。
前向和後向的展示就比較簡單了：兩者的上頁""標識會永遠展示，前向部分的頁碼1只有噹噹前頁碼不是1時才展示；後向部分的總數頁碼只有噹噹前頁碼不是總頁碼時才展示。
組件原型
<code><app-pagination>/<code>
我們為分頁組件命名為app-pagination，接受兩個參數：total和size，分別對應於前言所述的數據總數和每頁展示數據數。註冊為vue的組件：
<code>Vue.component('app-pagination', { props: { total: {type: Number}, size: {type: Number} }, data() { return { total: this.total, size: this.size }; }, template: ` - {{p}}
- {{current}}
- {{p}}
在template部分，我們對組件模板進行了分段判斷和定義，涉及到需要實現的參數和方法如下：pages、current、prevs、nexts、navigate。
計算pages
pages表示當前數據可分頁總數，我們在組件中增加一段computed配置，增加pages獲取方法：
<code>...computed: { pages() { return Math.ceil(this.total/this.size); }},.../<code>獲取current參數
current參數也即當前頁碼，為了從設計上最簡化和目前大多數傳參命名習慣，我們默認瀏覽器中的參數page即為當前頁碼，以這個url為例：http://example.com/news?category=1&page=2，我們需要從中提取出page參數，我們在methods部分定義一個獲取頁碼參數的方法param：
<code>methods: { param(name = null) { let url = location.href.split('?'); let params = []; if(url && url[1]) { let p = url[1].split('&'); for(let i = 0; i < p.length;i++) { let kv = p[i].split('='); params[kv[0]] = kv[1]; } } return name ? params[name] : params; }},/<code>在computed中增加current方法：
<code>current() { let page = parseInt(this.param('page')); return page > 1 ? page : 1;},/<code>prevs和nexts的實現
在computed中增加prevs和nexts方法，兩者均需要處理好邊界問題，保證不越界，並在超出部分用…替代：
<code>prevs() { let data = []; for(let i = 2; i >= 1; i--) { if(this.current - i > 1) data.push(this.current - i); } if(data[0] && data[0] > 1) { if(data[0] - 1 > 2) data.unshift('...'); else if(data[0] - 1 > 1) data.unshift(data[0] - 1); } return data;},nexts() { let data = []; for(let i = 2; i >= 1; i--) { if(this.current + i < this.pages) data.push(this.current + i); } if(data[0] && data[0] < this.pages) { if(data[0] + 1 < this.pages) data.unshift('...'); } return data.reverse();}/<code>事件navigate的處理
在methods中增加如下方法：
<code>navigate(page) { let params = this.param(), query = ''; params['page'] = page; Object.keys(params).forEach(k => query += k+'='+encodeURIComponent(params[k])+'&'); location.href = location.href.split('?')[0] + '?' + query.slice(0, -1);}/<code>這樣保證當相應的頁碼被點擊後，動態修改當前url中的page參數，刷新頁面。
簡單的樣式修飾
<code>.pagination li{display:inline-block;padding:5px;}.pagination li a{color:gray;}.pagination li.active{color:#32d296;}/<code>給你代碼往期回顧：
閱讀更多 鯤圭雲計算 的文章
