分頁組件在項目中經常要用到之前一直都是在網上找些jq的控件來用(逃..),最近幾個項目用上vue了項目又剛好需要一個分頁的功能。具體如下：
文件page.vue為一個pc端的分頁組件,基礎的分頁功能都有，基本的思路是，頁面是用數據來展示的，那就直接操作相關數據來改變視圖
Getting started
import Page from './page.vue' 從目錄引入該文件,在父組件注冊使用
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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li> 上一列表頁 <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li> 點解當前列表頁上一頁 <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li> <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li> 點解當前列表頁下一頁 <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></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成員的值
bash
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
之前用ember.js寫過一個類似組件，現在基于vue2.0封裝一個，方便以后用于不同項目，可以拿來直接使用.
小總結：之前也接觸過ng4,發現這些相似框架排除過渡動畫，頁面展示都是通過后臺發過來或者前端模擬的數據來 渲染頁面，當然這只是相通的一小部分，也是這類框架基本思想。
代碼地址：https://github.com/hgchenhao/component
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
