怎麼做出下滑頁面底部無限載入資料需求

這次帶給大家怎樣做出下滑頁面底部無限載入資料需求，怎下滑頁面底部無限載入資料的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

從這個項目中可以加深對Vue的生命週期的理解, 何時開始axios請求, 如何結合Vue使用原生js來寫scroll事件等等, 我這裡主要是對原文的重點提取和補充

本文技術要點

1. Vue生命週期

2. axios簡單用法

3. moment.js格式化日期

4. 圖片懶載入

5. 結合原生js來寫scroll事件

6. 請求節流

建立專案

首先建立一個簡單的vue專案

# vue init webpack-simple infinite-scroll-vuejs

然後安裝專案所需用的一些插件

# npm install axios moment

初始化使用者資料

專案搭建完後, 跑起來看看

# npm run dev

開啟http://localhost:8080無誤後, 我們開始修改程式碼, 先看看獲取用戶資料這塊,

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  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() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

這裡原作者也專門提醒, 完全沒有必要也不建議在加載頁面的時候請求5次, 只是這個接口一次只能返回1條資料, 僅用於測試才這樣做的. 當然我這裡也可以透過Mock來模擬資料, 就不詳細說了~

接下來來寫模板結構和样式, 如下:

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

這樣頁面就能顯示5個人的個人資訊了.

處理無限滾動載入邏輯

我們接下來需要在methods裡面加入scroll()來監聽滾動, 並且這個事件是應該在mounted()這個生命週期內的. 代碼如下:

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    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>

這段代碼原文是有一點拼寫錯誤的. 我這裡修正了, 另外增加了距離底部即開始載入資料, 並進行截流.

儲存好, 回到瀏覽器, 查看效果, 已經沒有問題了~

總結

滾動到頁面底部無限加載的功能在Vue上實現其實和普通的頁面開發差不多, 每次滾動加載未完成的情況下不會觸發請求下一次, 每次請求push到數組內, 通過的資料綁定實現了懶加載(其實0 0我不太認可...), 看完是不是感覺挺簡單的.

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue計算屬性與偵聽器實戰項目詳解

行動端如何做出上拉下滑刷新載入

以上是怎麼做出下滑頁面底部無限載入資料需求的詳細內容。更多資訊請關注PHP中文網其他相關文章！