您好,登錄后才能下訂單哦!
分頁(yè)組件在項(xiàng)目中經(jīng)常要用到之前一直都是在網(wǎng)上找些jq的控件來(lái)用(逃..),最近幾個(gè)項(xiàng)目用上vue了項(xiàng)目又剛好需要一個(gè)分頁(yè)的功能。具體如下:
文件page.vue為一個(gè)pc端的分頁(yè)組件,基礎(chǔ)的分頁(yè)功能都有,基本的思路是,頁(yè)面是用數(shù)據(jù)來(lái)展示的,那就直接操作相關(guān)數(shù)據(jù)來(lái)改變視圖
Getting started
import Page from './page.vue' 從目錄引入該文件,在父組件注冊(cè)使用
total:總頁(yè)碼
currentIndex:當(dāng)前頁(yè)碼
listLen:頁(yè)面ui要顯示幾個(gè)列表頁(yè)
getPage: page組件把每個(gè)事件的頁(yè)碼發(fā)送給父組件,用來(lái)向后臺(tái)發(fā)送相關(guān)請(qǐng)求來(lái)展示內(nèi)容
about page.vue
html 部分
<ul class="item" v-show="arr.length"> <li @click="start">首頁(yè)</li> <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li> 上一列表頁(yè) <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li> 點(diǎn)解當(dāng)前列表頁(yè)上一頁(yè) <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> 點(diǎn)解當(dāng)前列表頁(yè)下一頁(yè) <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li> 下一列表頁(yè) <li @click="end">尾頁(yè)</li> </ul>
相關(guān)數(shù)據(jù)說(shuō)明
data() { return { num: Number, //表示當(dāng)前頁(yè)碼高亮 arr: [], //頁(yè)面顯示的數(shù)組 page: Number, //一頁(yè)顯示多少個(gè),可以自定義,不能大于總頁(yè)碼 Remainder:Number, //是否整除 merchant:Number, // 比較總頁(yè)數(shù)和page頁(yè) }; }, props: { //分頁(yè)的總數(shù) total: { type: Number, default: 5 }, //當(dāng)前頁(yè) currentIndex: { type: Number, default: 1 }, //一個(gè)列表頁(yè)顯示多少頁(yè)碼 listLen:{ type: Number, default: 5 } },
methods 里面的相關(guān)事件,思路主要是判斷當(dāng)前列表頁(yè)的第一項(xiàng)和最后一項(xiàng).通過(guò)循環(huán)來(lái)該變arr成員的值
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寫(xiě)過(guò)一個(gè)類似組件,現(xiàn)在基于vue2.0封裝一個(gè),方便以后用于不同項(xiàng)目,可以拿來(lái)直接使用.
小總結(jié):之前也接觸過(guò)ng4,發(fā)現(xiàn)這些相似框架排除過(guò)渡動(dòng)畫(huà),頁(yè)面展示都是通過(guò)后臺(tái)發(fā)過(guò)來(lái)或者前端模擬的數(shù)據(jù)來(lái) 渲染頁(yè)面,當(dāng)然這只是相通的一小部分,也是這類框架基本思想。
代碼地址:https://github.com/hgchenhao/component
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。