Vue下轉動到頁面底部無窮加載數據Demo

看到一篇
Implementing an Infinite Scroll with Vue.js, 以為挺有用的就看了下, 趁便簡樸翻譯了一下給須要的人參考.

從這個項目中能夠加深對Vue的生命周期的明白, 什麼時刻最先axios要求, 怎樣連繫Vue運用原生js來寫scroll事宜等等, 我這裏主如果對原文的重點提取和補充

本文手藝要點

• Vue生命周期
• axios簡樸用法
• moment.js格式化日期
• 圖片懶加載
• 連繫原生js來寫scroll事宜
• 要求撙節

建立項目

起首建立一個簡樸的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>
  <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>

如許頁面就可以顯現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到數組內, 經由過程<img :src="">的數據綁定完成了懶加載(實在0 0我不太承認…), 看完是否是覺得挺簡樸的.

末了, 我把這個也弄了一份在GitHub上面, 有須要的能夠看看infinite-scroll-vuejs-demo~