无限滚动分页加载 vue好用插件vue-infinite-scroll 列表无限滚动加载

先放个美女的他拍照，养养眼 ~ 哈哈哈😄 准备这一波的学习，刚入职场学习的东西太多，没听过的，没接触过的太多了，但愿个人这些分享能分享给刚入职场的前端人员。

需求

今天的需求是作一个滚动分页无线加载，vue项目，开始没有思绪后来在网上学习一波，在这里就作个记录吧 ~

先来看两个图片效果吧（录屏不知道怎么传上来，会的大佬能教我嘛 😫）

大概就是酱紫 ~

安装

官网是：github.com/ElemeFE/vue…

在main.js中加入:

示例

看到有不少写这个的可是基本用的都是假数据，而不是分页的求取后端的数据，因此我就来总结一波带后端数据的 😋

给你想要滚动的部分加上这三个属性！！滚动部分必定给一个固定高度！！
v-infinite:触发加载更多的事件（必有项） infinite-scroll-disabled:是否润徐滚动加载（必有） infinite-scroll-distance:滚定条距离底部多少px开始加载下一页（自行设置）

子组件

父组件

我把loadMore事件和busy属性 经过props传给子组件

！！！重点来了 接口求取数据！

这里是分为第一次加载和屡次加载
第一次加载：直接获取数据，滚动打开，加载ing标志打开
第二次加载：第一页的数据拼接第二页的数据，也就实现了分页请求数据，若是数据是空，即到底了，加载ing标志关闭，滚动关闭

loadMore事件

页号增长，过一秒请求一次数据

总结

生命不止，需求不止 🤡😇 下期见