vue的一個分頁組件

基於vue2.0封裝的一個分頁組件

文件page.vue爲一個pc端的分頁組件,基礎的分頁功能都有，基本的思路是，頁面是用數據來展現的，那就直接操做相關數據來改變視圖

Getting started

import Page from './page.vue' 從目錄引入該文件,在父組件註冊使用

<page :total='total' :current-index="currentIndex" :listLen='listLen' @getPage='getPage'></page>
total：總頁碼
currentIndex：當前頁碼
listLen：頁面ui要顯示幾個列表頁
getPage： page組件把每一個事件的頁碼發送給父組件，用來向後臺發送相關請求來展現內容
複製代碼

about page.vue

html 部分

<ul class="item" v-show="arr.length">
       <li @click="start">首頁</li>
       <li @click="pre"><a href="javascript:;"><<</a></li>    上一列表頁
       <li @click="currentPre"><a href="javascript:;"><</a></li>     點擊當前列表頁上一頁
       <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
       <li @click="currentNext"><a href="javascript:;">></a></li>    點擊當前列表頁下一頁
       <li @click="next"><a href="javascript:;">>></a></li>    下一列表頁
       <li @click="end">尾頁</li>
   </ul>
複製代碼

相關數聽說明

data() {
   return {
     num: Number, //表示當前頁碼高亮
     arr: [], //頁面顯示的數組
     page: Number, //一頁顯示多少個,能夠自定義,不能大於總頁碼
     Remainder:Number, //是否整除
     merchant:Number, //  比較總頁數和page頁
   };
 },
 props: {
   //分頁的總數
   total: {
     type: Number,
     default: 5
   },
   //當前頁
   currentIndex: {
     type: Number,
     default: 1
   },
   //一個列表頁顯示多少頁碼
   listLen:{
     type: Number,
     default: 5
   }
 },
methods 裏面的相關事件，思路主要是判斷當前列表頁的第一項和最後一項.經過循環來該變arr成員的值  
相關片斷:
   //點擊當前每一個頁碼，獲取當前值，把頁碼發給父組件向服務端發送請求
   getPage(index) {
     this.num = index;
     this.getPageNum(index);
   },
   //點擊首頁
   start() {
     let [firstIndex]=this.arr;
     if (firstIndex === 1) {
       alert("已是第一個列表了");
       return;
     }
     this.pagination();
     this.getPageNum(this.num);
   },
   //點擊尾頁
   end() {
     let lastIndex = this.total + 1; //總頁碼加1  
     let [first] = this.arr; //獲取數組第一項
     let temp = [];   //設置一個臨時數組，用來拷貝
     if (this.arr[this.arr.length - 1] === this.total) {
       alert("已是最後一個列表頁了");
       return;
     }
     if (this.Remainder === 0) {   //是否整除
       for (let i = this.page; i > 0; i--) {
         temp.push(last - i);
       }
       this.arr = temp;
       [this.num]=this.arr
     } else {
       for (let i = this.Remainder; i > 0; i--) {
         temp.push(lastIndex - i);
       }
       this.arr = temp;
       [this.num]=this.arr
     }
     this.getPageNum(this.num);
   },
具體代碼見最下方
複製代碼

bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build


複製代碼

以前用ember.js寫過一個相似組件，如今基於vue2.0封裝一個，方便之後用於不一樣項目，能夠拿來直接使用.
小總結：以前也接觸過ng4,發現這些類似框架排除過渡動畫，頁面展現都是經過後臺發過來或者前端模擬的數據來 渲染頁面，固然這只是相通的一小部分，也是這類框架基本思想。
代碼地址：https://github.com/hgchenhao/component