這期內容當中小編將會給大家?guī)碛嘘PVue分頁器實現(xiàn)原理,文章內容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
新聞組件template:
<template> <div v-if="news"> <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)" class="new-show-left"> <div class="new-img"> <img :src="item.img" alt=""/> </div> <div class="time"> <span>{{item.time}}</span> </div> <h2>{{item.title}}</h2> <p>{{item.content}}</p> </div> </div> </template> <script type="text/ecmascript-6"> import page from '@/components/page' import bus from '@/eventBus/eventBus' import {getNew} from '@/getData/getData' export default{ components: { page }, data () { return { newList: '', newList2: '', newListLength: '', newListPageIndex: '1', // 下標 next: false, previous: false, news: true, title: '' } }, created () { this.$nextTick(() => { this._init_list1() }) bus.$on('current-item', (ev) => { this.$nextTick(() => { this.currentItem(ev) }) }) bus.$on('next-page', (ev) => { this.$nextTick(() => { this.nextPage(ev) }) }) bus.$on('previous-page', (ev) => { this.$nextTick(() => { this.previousPage(ev) }) }) }, methods: { _init_list1 () { getNew().then(res => { this.newList = res.data.list1 let myObject = res.data.list1 this.newListLength = Object.keys(myObject).length this.newListLength = Math.ceil((this.newListLength) / 6) this.pageStyle() }) }, pageStyle () { if (this.newListPageIndex < this.newListLength) { this.next = true if (this.newListPageIndex > 1) { this.previous = true } else { this.previous = false } } else { this.next = false if (this.newListPageIndex > 1) { this.previous = true } else { this.previous = false } } }, currentItem (ev) { this.newListPageIndex = ev window.scrollTo(0, 500) this.pageStyle() }, nextPage () { if (this.newListPageIndex < this.newListLength) { this.newListPageIndex ++ window.scrollTo(0, 500) this.pageStyle() } }, previousPage () { if (this.newListPageIndex > 1) { this.newListPageIndex -- window.scrollTo(0, 500) this.pageStyle() } } } } </script>
分頁器組件template:
<template> <ul class="page"> <li> <img @click="previousPage" :src="[(previous==true ? 'static/images/leftGo-black.png' : 'static/images/leftGo.png')]"> <span @click="previousPage" :class="[(previous==true ? 'black-color' : 'gray-color')]">上一頁</span> </li> <li > <span @click="currentItem" v-for="(item, index) in listLength" :class="[(listPageIndex == index+1) ? 'gray-color':'black-color']">{{item}}</span> </li> <li> <span @click="nextPage" :class="[(next == true ? 'black-color':'gray-color')]">下一頁</span> <img @click="nextPage" :src="[(next==true ? 'static/images/rightGo.png' : 'static/images/rightGo-gray.png')]"> </li> </ul> </template> <script type="text/ecmascript-6"> import bus from '@/eventBus/eventBus' export default{ props: { listLength: '', listPageIndex: '', next: '', previous: '' }, created () { // console.log(this.next) }, methods: { currentItem (ev) { bus.$emit('current-item', ev.target.innerHTML) }, nextPage (ev) { bus.$emit('next-page', ev) }, previousPage (ev) { bus.$emit('previous-page', ev) } } } </script>
一,首先自己寫一個json文件(六條數(shù)據(jù)我就寫兩條吧,太長了),并在新聞組件里使用axios請求這個json文件:
{ "id": "1", "title": "新聞一", "time": "2017.10", "content": "新聞一的簡介...", "imgSrc": "static/images/new1.png" }, { "id": "2", "title": "新聞二", "time": "2017.11", "content": "新聞二的簡介...", "imgSrc": "static/images/new2.png" }, ...(總歸六條數(shù)據(jù)省略四條不寫)
需求:每頁顯示四條新聞
原理:
1、請求接口數(shù)據(jù),生成HTML頁面(利用axios請求json文件,v-for循環(huán)將數(shù)據(jù)排版)
2、動態(tài)生成分頁器頁碼(根據(jù)json數(shù)據(jù)長度):
利用axios請求json文件,需要用到兩個數(shù)據(jù):一個是json這段新聞的長度newListLength,一個是這段數(shù)據(jù)的自身newtList,對數(shù)據(jù)長度的處理方法是:
this.newListLength = Math.ceil((this.newListLength) /4)
因為我們的json數(shù)據(jù)就寫了六個,故這樣計算得到的長度就是2(數(shù)據(jù)長度大于4處理得到的數(shù)據(jù)就是2,小于等于4得到的數(shù)值為1),以此類推,將這個數(shù)據(jù)傳入分頁器作為頁碼
在分頁器page組件中利用pros接收父級傳來的處理過后的長度,得到需要展示的分頁器頁碼長度,再把此長度傳到分頁器組件,v-for循環(huán)生成頁碼
3、利用v-if實現(xiàn)頁面任意展示某一段json的數(shù)據(jù),比如我有6條數(shù)據(jù),一頁只需要展示4條
<div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)">
在新聞組件中令newListPageIndex的默認值是1,那么v-if=(0 =< index <= 3)初始展示第一頁數(shù)據(jù)嘛
4、上面三步實現(xiàn)了幾個功能,展示任意一段數(shù)據(jù),分頁器隨json內取的這段數(shù)據(jù)動態(tài)生成頁碼。下面要做聯(lián)動,分頁器頁碼點擊對應展示相應區(qū)域的json數(shù)據(jù)。
當前點擊頁碼上的點擊事件是currentItem,利用emit提交當前節(jié)點,獲取頁碼數(shù)字,父組件emit提交當前節(jié)點,獲取頁碼數(shù)字,父組件on接收這個頁碼數(shù)字。
令this.newListPageIndex = ev,這樣就會引起v-if里面計算表達式的改變,如果是點擊的1,那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。計算結果是0=< index <=7,即展示json里下標為0到3的4條數(shù)據(jù),類推,如果點擊的是2,則展示下標為4=< index <=7的數(shù)據(jù)。
5、還差一點功能是上一頁和下一頁的點擊事件,這個類似點擊頁碼,不同的是點擊頁碼傳遞的數(shù)據(jù)是當前頁碼數(shù)字,而點擊上或下一頁,是讓父組件接收指令,因為當前的newListPageIndex受到分頁器頁碼的控制,所以只需要操作newListPageIndex令其- -或者++即可,要注意的是第一頁時肯定不能點上一頁了,尾頁不能點下一頁,所以,newListPageIndex令其–(起碼要大于1對吧,2-1=1最小退到第一頁哈)或者++(要小于數(shù)據(jù)的總長度)要寫在if語句里面
if (this.newListPageIndex < this.newListLength) { this.newListPageIndex ++ } if (this.equipmentListPageIndex > 1) { this.newListPageIndex -- }
6、最后就是頁碼與上頁下頁style顏色顯示的問題,這里設置是處于當前頁碼狀態(tài)時,當前頁碼處于是灰色不能點擊,其它頁碼是黑色可點擊。處于第一頁時上一頁灰色不可點擊而下一頁的樣式反之,處于末頁下一頁灰色不可點擊而上一頁的樣式反之
處理思路是,利用三元表達式來判斷。當頁碼通過v-for遍歷,因為當前展示區(qū)域控制數(shù)據(jù)的是newListPageIndex(起始加載默認為1),這時只要讓頁碼下標index+1(因為下標從零開始,而長度從1開始)與newListPageIndex相等的那個頁碼塊為灰色不可點擊而其它的頁碼為黑色可點擊即可。計算思路如下:
v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"
上述就是小編為大家分享的Vue分頁器實現(xiàn)原理了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
當前名稱:Vue分頁器實現(xiàn)原理-創(chuàng)新互聯(lián)
地址分享:http://jinyejixie.com/article44/dpodee.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、企業(yè)建站、搜索引擎優(yōu)化、電子商務、網(wǎng)站改版、自適應網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)