Vue分頁(yè)器實(shí)現(xiàn)原理詳解
本文為大家講解了Vue分頁(yè)器實(shí)現(xiàn)原理，供大家參考，具體內(nèi)容如下
網(wǎng)上搜的分頁(yè)器大多是jQuery實(shí)現(xiàn)的，而且也不太完善，于是自己寫(xiě)了個(gè)分頁(yè)器組件，以后再用也不慌，直接復(fù)制過(guò)去就ok，下面說(shuō)說(shuō)具體實(shí)現(xiàn)的代碼和原理吧。
新聞組件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>
<h1>{{item.title}}</h1>
<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', // 下標(biāo)
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>
分頁(yè)器組件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')]">上一頁(yè)</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')]">下一頁(yè)</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>
一，首先自己寫(xiě)一個(gè)json文件（六條數(shù)據(jù)我就寫(xiě)兩條吧，太長(zhǎng)了），并在新聞組件里使用axios請(qǐng)求這個(gè)json文件：
{
"id": "1",
"title": "新聞一",
"time": "2017.10",
"content": "新聞一的簡(jiǎn)介...",
"imgSrc": "static/images/new1.png"
},
{
"id": "2",
"title": "新聞二",
"time": "2017.11",
"content": "新聞二的簡(jiǎn)介...",
"imgSrc": "static/images/new2.png"
},
...（總歸六條數(shù)據(jù)省略四條不寫(xiě)）
需求：每頁(yè)顯示四條新聞
原理：
1、請(qǐng)求接口數(shù)據(jù)，生成HTML頁(yè)面（利用axios請(qǐng)求json文件，v-for循環(huán)將數(shù)據(jù)排版）
2、動(dòng)態(tài)生成分頁(yè)器頁(yè)碼（根據(jù)json數(shù)據(jù)長(zhǎng)度）：
利用axios請(qǐng)求json文件，需要用到兩個(gè)數(shù)據(jù)：一個(gè)是json這段新聞的長(zhǎng)度newListLength，一個(gè)是這段數(shù)據(jù)的自身newtList，對(duì)數(shù)據(jù)長(zhǎng)度的處理方法是：
this.newListLength = Math.ceil((this.newListLength) /4)
因?yàn)槲覀兊膉son數(shù)據(jù)就寫(xiě)了六個(gè)，故這樣計(jì)算得到的長(zhǎng)度就是2（數(shù)據(jù)長(zhǎng)度大于4處理得到的數(shù)據(jù)就是2，小于等于4得到的數(shù)值為1），以此類(lèi)推，將這個(gè)數(shù)據(jù)傳入分頁(yè)器作為頁(yè)碼
在分頁(yè)器page組件中利用pros接收父級(jí)傳來(lái)的處理過(guò)后的長(zhǎng)度，得到需要展示的分頁(yè)器頁(yè)碼長(zhǎng)度，再把此長(zhǎng)度傳到分頁(yè)器組件，v-for循環(huán)生成頁(yè)碼
3、利用v-if實(shí)現(xiàn)頁(yè)面任意展示某一段json的數(shù)據(jù)，比如我有6條數(shù)據(jù)，一頁(yè)只需要展示4條
<div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)">
在新聞組件中令newListPageIndex的默認(rèn)值是1，那么v-if=（0 =< index <= 3）初始展示第一頁(yè)數(shù)據(jù)嘛
4、上面三步實(shí)現(xiàn)了幾個(gè)功能，展示任意一段數(shù)據(jù)，分頁(yè)器隨json內(nèi)取的這段數(shù)據(jù)動(dòng)態(tài)生成頁(yè)碼。下面要做聯(lián)動(dòng)，分頁(yè)器頁(yè)碼點(diǎn)擊對(duì)應(yīng)展示相應(yīng)區(qū)域的json數(shù)據(jù)。
當(dāng)前點(diǎn)擊頁(yè)碼上的點(diǎn)擊事件是currentItem，利用emit提交當(dāng)前節(jié)點(diǎn)，獲取頁(yè)碼數(shù)字，父組件emit提交當(dāng)前節(jié)點(diǎn)，獲取頁(yè)碼數(shù)字，父組件on接收這個(gè)頁(yè)碼數(shù)字。
令this.newListPageIndex = ev，這樣就會(huì)引起v-if里面計(jì)算表達(dá)式的改變，如果是點(diǎn)擊的1，那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。計(jì)算結(jié)果是0=< index <=7，即展示json里下標(biāo)為0到3的4條數(shù)據(jù)，類(lèi)推，如果點(diǎn)擊的是2，則展示下標(biāo)為4=< index <=7的數(shù)據(jù)。
5、還差一點(diǎn)功能是上一頁(yè)和下一頁(yè)的點(diǎn)擊事件，這個(gè)類(lèi)似點(diǎn)擊頁(yè)碼，不同的是點(diǎn)擊頁(yè)碼傳遞的數(shù)據(jù)是當(dāng)前頁(yè)碼數(shù)字，而點(diǎn)擊上或下一頁(yè)，是讓父組件接收指令，因?yàn)楫?dāng)前的newListPageIndex受到分頁(yè)器頁(yè)碼的控制，所以只需要操作newListPageIndex令其- -或者++即可，要注意的是第一頁(yè)時(shí)肯定不能點(diǎn)上一頁(yè)了，尾頁(yè)不能點(diǎn)下一頁(yè)，所以，newListPageIndex令其–（起碼要大于1對(duì)吧,2-1=1最小退到第一頁(yè)哈）或者++（要小于數(shù)據(jù)的總長(zhǎng)度）要寫(xiě)在if語(yǔ)句里面
if (this.newListPageIndex < this.newListLength) {
this.newListPageIndex ++
}
if (this.equipmentListPageIndex > 1) {
this.newListPageIndex --
}
6、最后就是頁(yè)碼與上頁(yè)下頁(yè)style顏色顯示的問(wèn)題，這里設(shè)置是處于當(dāng)前頁(yè)碼狀態(tài)時(shí)，當(dāng)前頁(yè)碼處于是灰色不能點(diǎn)擊，其它頁(yè)碼是黑色可點(diǎn)擊。處于第一頁(yè)時(shí)上一頁(yè)灰色不可點(diǎn)擊而下一頁(yè)的樣式反之，處于末頁(yè)下一頁(yè)灰色不可點(diǎn)擊而上一頁(yè)的樣式反之
處理思路是，利用三元表達(dá)式來(lái)判斷。當(dāng)頁(yè)碼通過(guò)v-for遍歷，因?yàn)楫?dāng)前展示區(qū)域控制數(shù)據(jù)的是newListPageIndex（起始加載默認(rèn)為1），這時(shí)只要讓頁(yè)碼下標(biāo)index+1（因?yàn)橄聵?biāo)從零開(kāi)始，而長(zhǎng)度從1開(kāi)始）與newListPageIndex相等的那個(gè)頁(yè)碼塊為灰色不可點(diǎn)擊而其它的頁(yè)碼為黑色可點(diǎn)擊即可。計(jì)算思路如下：
v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"
上一頁(yè)下一頁(yè)以及頁(yè)碼都是通過(guò)newListPageIndex相聯(lián)系的，所以當(dāng)我點(diǎn)擊頁(yè)碼或者上一頁(yè)下一頁(yè)他們的樣式顏色都會(huì)相互影響改變，實(shí)現(xiàn)思路大抵如上了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于在原生HTML中使用VUE的保姆級(jí)教學(xué),需要的朋友可以參考下2023-10-10
Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue項(xiàng)目結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能(實(shí)例代碼)
這篇文章主要介紹了Vue項(xiàng)目中結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue中的過(guò)濾器，本文通過(guò)文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue?+?Axios?請(qǐng)求接口方法與傳參方式詳解
使用Vue的腳手架搭建的前端項(xiàng)目，通常都使用Axios封裝的接口請(qǐng)求，項(xiàng)目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對(duì)Vue?+?Axios?請(qǐng)求接口方法與傳參問(wèn)題感興趣的朋友一起看看吧2021-12-12
本文通過(guò)實(shí)例代碼給大家介紹了vue中的無(wú)限循環(huán)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
Vue項(xiàng)目打包優(yōu)化實(shí)踐指南(推薦!)
如果引入的庫(kù)眾多,那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?影響首開(kāi)的體驗(yàn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包優(yōu)化實(shí)踐的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
本文是小編給大家收藏整理的Vue常見(jiàn)面試題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09