vue的一個(gè)分頁組件的示例代碼
分頁組件在項(xiàng)目中經(jīng)常要用到之前一直都是在網(wǎng)上找些jq的控件來用(逃..),最近幾個(gè)項(xiàng)目用上vue了項(xiàng)目又剛好需要一個(gè)分頁的功能。具體如下：
文件page.vue為一個(gè)pc端的分頁組件,基礎(chǔ)的分頁功能都有，基本的思路是，頁面是用數(shù)據(jù)來展示的，那就直接操作相關(guān)數(shù)據(jù)來改變視圖
Getting started
import Page from './page.vue' 從目錄引入該文件,在父組件注冊(cè)使用
<page :total='total' :current-index="currentIndex" :listLen='listLen' @getPage='getPage'></page>
total：總頁碼
currentIndex：當(dāng)前頁碼
listLen：頁面ui要顯示幾個(gè)列表頁
getPage： page組件把每個(gè)事件的頁碼發(fā)送給父組件，用來向后臺(tái)發(fā)送相關(guān)請(qǐng)求來展示內(nèi)容
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> 點(diǎn)解當(dāng)前列表頁上一頁
<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)前列表頁下一頁
<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>
相關(guān)數(shù)據(jù)說明
data() {
return {
num: Number, //表示當(dāng)前頁碼高亮
arr: [], //頁面顯示的數(shù)組
page: Number, //一頁顯示多少個(gè),可以自定義,不能大于總頁碼
Remainder:Number, //是否整除
merchant:Number, // 比較總頁數(shù)和page頁
};
},
props: {
//分頁的總數(shù)
total: {
type: Number,
default: 5
},
//當(dāng)前頁
currentIndex: {
type: Number,
default: 1
},
//一個(gè)列表頁顯示多少頁碼
listLen:{
type: Number,
default: 5
}
},
methods 里面的相關(guān)事件，思路主要是判斷當(dāng)前列表頁的第一項(xiàng)和最后一項(xiàng).通過循環(huán)來該變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寫過一個(gè)類似組件，現(xiàn)在基于vue2.0封裝一個(gè)，方便以后用于不同項(xiàng)目，可以拿來直接使用.
小總結(jié)：之前也接觸過ng4,發(fā)現(xiàn)這些相似框架排除過渡動(dòng)畫，頁面展示都是通過后臺(tái)發(fā)過來或者前端模擬的數(shù)據(jù)來 渲染頁面，當(dāng)然這只是相通的一小部分，也是這類框架基本思想。
代碼地址：https://github.com/hgchenhao/component
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目打包部署到apache服務(wù)器的方法步驟
這篇文章主要介紹了Vue項(xiàng)目打包部署到apache服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue一直自動(dòng)換行的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue的SPA動(dòng)態(tài)修改頁面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動(dòng)態(tài)修改頁面title的方法,需要的朋友可以參考下2018-01-01
這篇文章主要給大家介紹了關(guān)于Vue如何使用Dayjs計(jì)算常用日期的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題
今天小編就為大家分享一篇解決vue項(xiàng)目F5刷新mounted里的函數(shù)不執(zhí)行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁面
這篇文章主要介紹了vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下2018-04-04
Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
這篇文章主要為大家介紹了Vue?2源碼閱讀?Provide?Inject?依賴注入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08