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, 所以卖的比一般的二手贵, 无人识相, 遂继续自用.

2018年7月16日更新

经过了长达半年的折腾。陆陆续续修修补补,终于把这个机型的黑苹果给完善了。此文档主要做备份说明和分享。我将相关Clover配置和补丁文件发布到了Github,有兴趣可以直接访问:

准系统W350ETQ(神舟K590S)的黑苹果Clover

下载下来直接尝试使用。

以下内容是之前4月写的,有兴趣可以阅读。


作为一名爱瞎折腾的前端来说, 学会使用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总结”