看到一篇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>