译文： https://alligator.io/vuejs/implementing-infinite-scroll/
本文将使用 Random User API (模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum，但是对于人”。它不仅适用于此实现，而且对于模仿未来项目的用户配置文件也非常有用。
在你开始前，用 Vue CLI webpack-simple 项目模板创建一个新的 Vue.js 项目。此例子将分别用 Axios 和 MomentJS 来获取数据和日期格式。
$ vue init webpack-simple infinite-scroll-vuejs
有各种实现无限滚动的 npm 包，你可以使用你的 Vue 应用程序，但其中一些可能是太繁琐了。此文中，我们将不用那些插件或包，仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能（当滚动到浏览器窗口底部时，获取一组新数据）。
在我们开始集成无限滚动之前，让我们在页面加载中获取并设置一些初始数据：
App.vue
注意：
Random User API 一次只会返回一个随机用户数据，为了获得5个用户数据，需要发起五次请求。
如果您在 console 看到了五个用户数据，那就OK了！让我们通过模板中的这些数据进行迭代，然后继续：
App.vue
现在你在此的目的......无限的滚动！ 在组件的方法中，您需要创建一个名为 scroll() 的新函数，并将其加载到 mounted() 生命周期方法中。
这个 scroll() 方法应该有一个简单的条件来计算页面的底部，判断它为true或false，并执行一些操作。我们将利用文档对象的 documentElement.scrollTop ， documentElement.offsetHeight 属性和窗口的 innerHeight 属性来确定是否滚动到底部：
在这种情况下，让我们添加一个GET方法，使用Axios从随机用户API中获取另一个随机用户。
此功能只会在用户滚动到页面底部时发起服务请求，并向人员数组添加一个新的随机“用户”。此时，您应该可以无限滚动...并每次看到新的“用户”。
无限滚动听起来吓人，但如所证明的那样，它非常简单。每次滚动到页面的底部时，我们都会使用 Axios 获取新数据，然后将这些数据推送到数组中。要延迟加载图像，只需将图像源推送到数据数组，在模板中遍历它，然后将 <img：src ="">绑定到数组。
ps： 此文核心就在【判断是否滚动到页面底部的逻辑上】，在此提供一个兼容性更好的写法，参考此文 滚动到底部加载更多 。
1、Vue是什么 Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。 Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。 Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是一套用于构建用户界面的渐进式框架。 2、Vue的特点 遵循 MVVM 模式 编码简洁，体积小，运行效率高，适合移动/PC 端开发 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目 3、Vue与其他前端框架的关系 借鉴 angular 的模板和数据绑定技术 借鉴 react 的组件化和虚拟 DOM 技术 4、Vue的现有插件 vue-cli: vue 脚手架，用于搭建项目的骨架 vue-resource(axios): ajax 请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 vue-scroller: 页面滑动相关 mint-ui: 基于 vue 的 UI 组件库(移动端) element-ui: 基于 vue 的 UI 组件库(PC 端) 5、学习Vue的思想改变Vue的中心思想是数据驱动，像远古时代的老前辈jQuery是结构驱动。
大家回忆下以前我们使用jQuery写代码的时候，经常是这样写的：
$("#myDiv").html("HelloWorld")
这些写法首先要获取Dom节点，也就是Dom结构，然后再修改数据更新结构的内容，使用jQuery的一个很大的目的就是为了去简化Dom的操作，而使用Vue就大不一样了，Vue的做法就是直接this.msg=HelloWorld，然后msg就会自动的同步到结构上，我们所要关心的是数据内容的改变，而不再去关心如何操作Dom结构了。
总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!
![关于[JS] forEach循环return无法跳出的踩坑和解决方案](/aiimages/%E5%85%B3%E4%BA%8E%5BJS%5D+forEach%E5%BE%AA%E7%8E%AFreturn%E6%97%A0%E6%B3%95%E8%B7%B3%E5%87%BA%E7%9A%84%E8%B8%A9%E5%9D%91%E5%92%8C%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.png)
