Vue分頁器實現(xiàn)原理-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Vue分頁器實現(xiàn)原理，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團(tuán)隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

新聞組件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', // 下標(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>

分頁器組件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的默認(rèn)值是1，那么v-if=（0 =< index <= 3）初始展示第一頁數(shù)據(jù)嘛

4、上面三步實現(xiàn)了幾個功能，展示任意一段數(shù)據(jù)，分頁器隨json內(nèi)取的這段數(shù)據(jù)動態(tài)生成頁碼。下面要做聯(lián)動，分頁器頁碼點擊對應(yīng)展示相應(yīng)區(qū)域的json數(shù)據(jù)。

當(dāng)前點擊頁碼上的點擊事件是currentItem，利用emit提交當(dāng)前節(jié)點，獲取頁碼數(shù)字，父組件emit提交當(dāng)前節(jié)點，獲取頁碼數(shù)字，父組件on接收這個頁碼數(shù)字。

令this.newListPageIndex = ev，這樣就會引起v-if里面計算表達(dá)式的改變，如果是點擊的1，那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。計算結(jié)果是0=< index <=7，即展示json里下標(biāo)為0到3的4條數(shù)據(jù)，類推，如果點擊的是2，則展示下標(biāo)為4=< index <=7的數(shù)據(jù)。

5、還差一點功能是上一頁和下一頁的點擊事件，這個類似點擊頁碼，不同的是點擊頁碼傳遞的數(shù)據(jù)是當(dāng)前頁碼數(shù)字，而點擊上或下一頁，是讓父組件接收指令，因為當(dāng)前的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顏色顯示的問題，這里設(shè)置是處于當(dāng)前頁碼狀態(tài)時，當(dāng)前頁碼處于是灰色不能點擊，其它頁碼是黑色可點擊。處于第一頁時上一頁灰色不可點擊而下一頁的樣式反之，處于末頁下一頁灰色不可點擊而上一頁的樣式反之
處理思路是，利用三元表達(dá)式來判斷。當(dāng)頁碼通過v-for遍歷，因為當(dāng)前展示區(qū)域控制數(shù)據(jù)的是newListPageIndex（起始加載默認(rèn)為1），這時只要讓頁碼下標(biāo)index+1（因為下標(biāo)從零開始，而長度從1開始）與newListPageIndex相等的那個頁碼塊為灰色不可點擊而其它的頁碼為黑色可點擊即可。計算思路如下：

v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"

上述就是小編為大家分享的Vue分頁器實現(xiàn)原理了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：Vue分頁器實現(xiàn)原理-創(chuàng)新互聯(lián)
地址分享：http://bm7419.com/article44/dpodee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、企業(yè)建站、搜索引擎優(yōu)化、電子商務(wù)、網(wǎng)站改版、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)