快捷導(dǎo)航

Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼

更新時(shí)間：2018年04月22日 11:52:39 作者：whidy

本篇文章主要介紹了Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

看到一篇Implementing an Infinite Scroll with Vue.js , 覺得挺實(shí)用的就看了下, 順便簡(jiǎn)單翻譯了一下給需要的人參考.

從這個(gè)項(xiàng)目中可以加深對(duì)Vue的生命周期的理解, 何時(shí)開始axios請(qǐng)求, 如何結(jié)合Vue使用原生js來(lái)寫scroll事件等等, 我這里主要是對(duì)原文的重點(diǎn)提取和補(bǔ)充

本文技術(shù)要點(diǎn)

Vue生命周期
axios簡(jiǎn)單用法
moment.js格式化日期
圖片懶加載
結(jié)合原生js來(lái)寫scroll事件
請(qǐng)求節(jié)流

創(chuàng)建項(xiàng)目

首先創(chuàng)建一個(gè)簡(jiǎn)單的vue項(xiàng)目

# vue init webpack-simple infinite-scroll-vuejs

然后安裝項(xiàng)目所需要用的一些插件

# npm install axios moment

初始化用戶數(shù)據(jù)

項(xiàng)目搭建完后, 跑起來(lái)看看

# npm run dev

打開http://localhost:8080無(wú)誤后, 我們開始修改代碼, 先看看獲取用戶數(shù)據(jù)這塊,

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 創(chuàng)建一個(gè)存放用戶數(shù)據(jù)的數(shù)組
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios請(qǐng)求接口獲取數(shù)據(jù)
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在頁(yè)面掛載前就發(fā)起請(qǐng)求
  this.getInitialUsers()
 }
}
</script>

這里原作者也專門提醒, 完全沒有必要也不建議在加載頁(yè)面的時(shí)候請(qǐng)求5次, 只是這個(gè)接口一次只能返回1條數(shù)據(jù), 僅用于測(cè)試才這樣做的. 當(dāng)然我這里也可以通過(guò)Mock來(lái)模擬數(shù)據(jù), 就不詳細(xì)說(shuō)了~

接下來(lái)來(lái)寫模板結(jié)構(gòu)和樣式, 如下:

<template>
 <div id="app">
  <h1>Random User</h1>
  <div class="person" v-for="(person, index) in persons" :key="index">
   <div class="left">
    <img :src="person.picture.large" alt="">
   </div>
   <div class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <div class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </div>
    </ul>
   </div>
  </div>
 </div>
</template>

<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;

 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }

 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }

 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

這樣頁(yè)面就能顯示5個(gè)人的個(gè)人信息了.

處理無(wú)限滾動(dòng)加載邏輯

我們接下來(lái)需要在methods里面添加scroll()來(lái)監(jiān)聽滾動(dòng), 并且這個(gè)事件是應(yīng)該在mounted()這個(gè)生命周期內(nèi)的. 代碼如下:

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距離底部200px時(shí)加載一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

這段代碼原文是有一點(diǎn)拼寫錯(cuò)誤的. 我這里修正了, 另外增加了距離底部即開始加載數(shù)據(jù), 并進(jìn)行截流.

保存好, 回到瀏覽器, 查看效果, 已經(jīng)沒有問(wèn)題了~

總結(jié)

滾動(dòng)到頁(yè)面底部無(wú)限加載的功能在Vue上實(shí)現(xiàn)其實(shí)和普通的頁(yè)面開發(fā)差不多, 每次滾動(dòng)加載未完成的情況下不會(huì)觸發(fā)請(qǐng)求下一次, 每次請(qǐng)求push到數(shù)組內(nèi), 通過(guò)<img :src="">的數(shù)據(jù)綁定實(shí)現(xiàn)了懶加載(其實(shí)0 0我不太認(rèn)可...), 看完是不是感覺挺簡(jiǎn)單的.

最后, 我把這個(gè)也弄了一份在GitHub上面, 有需要的可以看看infinite-scroll-vuejs-demo~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: