Vue下滚动到页面底部无限加载数据Demo

看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.
从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充

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~

Clevo W350ETQ(神舟K590S)安装黑苹果10.13总结

作为一名爱瞎折腾的前端来说, 学会使用MacOSX, 或许是有必要的, 于是想着去买一台MBP, 可是无奈电脑太多, 不想再添置, 于是把我的神级Clevo W350ETQ(也是神舟后来出的K590S)忍痛的挂在了闲鱼上, 自己一直保养很好, 后来怒加4G条子和SSD, 所以卖的比一般的二手贵, 无人识相, 遂继续自用.

作为一名爱瞎折腾的前端来说, 学会使用MacOSX, 或许是有必要的, 于是想着去买一台MBP, 可是无奈电脑太多, 不想再添置, 于是把我的神级Clevo W350ETQ(也是神舟后来出的K590S)忍痛的挂在了闲鱼上, 自己一直保养很好, 后来怒加4G条子和SSD, 所以卖的比一般的二手贵, 无人识相, 遂继续自用.

我的电脑配置及相关评测曾经也在博客(相关索引)中提到. 在当年来说是非常强悍的一款游戏本, 至今依然能算一台中端性能笔记本, 只是便携性太差, 一直以来都作为办公台式机使用, 我这台配置如下:

处理器名称: Mobile QuadCore Intel Core i7-3612QM, 3000 MHz (30 x 100)
主板名称: Clevo W35_37ET
主板芯片组: Intel Panther Point HM77, Intel Ivy Bridge
系统内存: 8084 MB (4 GB * 2 DDR3-1600)
显示适配器:
  Intel(R) HD Graphics 4000
  NVIDIA GeForce GTX 660M
显示器: LG Philips LP156WF1-TLC1 [15.6" LCD]
音频适配器: Realtek ALC269 @ Intel Panther Point PCH - High Definition Audio Controller [C-1]
IDE 控制器: Intel(R) 7 Series Chipset Family SATA AHCI Controller
IDE 控制器: Realtek PCIE CardReader
硬盘驱动器: OCZ-VERTEX4
硬盘驱动器: ST9500423AS
光盘驱动器: TSSTcorp CDDVDW SN-208AB
键盘: PS/2 标准键盘
鼠标: ELAN Input Device
网络适配器: Realtek PCIe GBE Family Controller
网络适配器: Realtek RTL8723AE Wireless LAN 802.11n PCI-E NIC (192.168.31.248)
USB 设备: BisonCam, NB Pro
USB 设备: Realtek Bluetooth 4.0 Adapter
USB 设备: TouchStrip Fingerprint Sensor (WBF advanced mode)
DMI 系统制造商: CLEVO CO.
DMI 系统产品: W35_37ET

只有先弄清楚配置才能接下来进行黑苹果的安装, 其实几年前我尝试过安装黑苹果, 最终以失败告终, 然而本来是抱着看看的心理, 又跑去看远景论坛, 看到一个帖子: 【初春之献】macOS High Sierra 10.13.4 17E199 With Clover 4423修正原版镜像, 一下子又动了心, 于是这清明几天假又没有休息好, 为了安装上黑苹果简直比上班工作的状态还要投入, 一下子三天过去了, 我后背越发疼了. 心想这几天本来可以好好休息顺便学习下Vuex, 计划泡汤! 好在, 最后还是折腾出来了点结果. 基本上算比较完美了. 接下来我就对这几天的研究做个总结. 先上图两张图过过瘾.

继续阅读“Clevo W350ETQ(神舟K590S)安装黑苹果10.13总结”