vue的一個分頁元件

CoolChenCool發表於2017-12-25
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

相關文章