Vue下滾動到頁面底部無限加載數據Demo

時間 2019-11-08

標籤 vue 滾動頁面底部無限加載數據 demo 简体版

原文原文鏈接

Vue下滾動到頁面底部無限加載數據Demo

看到一篇 Implementing an Infinite Scroll with Vue.js, 以爲挺實用的就看了下, 順便簡單翻譯了一下給須要的人蔘考.
從這個項目中能夠加深對Vue的生命週期的理解, 什麼時候開始axios請求, 如何結合Vue使用原生js來寫scroll事件等等, 我這裏主要是對原文的重點提取和補充css

本文技術要點

Vue生命週期
axios簡單用法
moment.js格式化日期
圖片懶加載
結合原生js來寫scroll事件
請求節流

建立項目

首先建立一個簡單的vue項目html

# vue init webpack-simple infinite-scroll-vuejs

而後安裝項目所須要用的一些插件vue

# npm install axios moment

初始化用戶數據

項目搭建完後, 跑起來看看webpack

# npm run dev

打開http://localhost:8080無誤後, 咱們開始修改代碼, 先看看獲取用戶數據這塊,ios

<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來模擬數據, 就不詳細說了~

接下來來寫模板結構和樣式, 以下:git

<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我的的我的信息了.github

處理無限滾動加載邏輯

咱們接下來須要在methods裏面添加scroll()來監聽滾動, 而且這個事件是應該在mounted()這個生命週期內的. 代碼以下:web

<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>