Element｜InfiniteScroll 无限滚动组件的具体使用方法

目录

PC 端 ： 

InfiniteScroll 无限滚动

详细说明

v-infinite-scroll 指令

infinite-scroll-disabled 属性

infinite-scroll-distance 属性

总结

使用弊端 ：

尝试解决 ：

代码实现 ：

移动端 ：

List 列表

---

需求背景 ：

        列表页面，由于数据量过多时 在 IE 浏览器上面会加载异常缓慢，刚进入时页面空白无数据，导致用户体验感较差，所以需要整改优化。

    这里就需要 前后端 联调 调整 了，

    后端：需将接口由原来的传给前端的全部数据方式调整为 “分页传输” 方式，也就是前端再多传给后端两个字段值：currentPage：1，// 当前页数；pageSize：10，// 一页显示的条数（ 当然这里我们是由后端写死了：5，一页固定传给前端 5 条数据，所以前端此字段可以不传 ）

    前端：进行 懒加载 处理，也就是 需借助 Element｜InfiniteScroll 无限滚动 组件 来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组后再次展示新的内容。【 PC 端 】

      接下来就让我们来 了解 & 如何使用 吧：（ 可参考 组件的 禁用加载 示例 ）

---

    前端：懒加载，移动端 需借助 Vant 2 ｜List 列表 组件 ｜基础用法 来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组。

---

PC 端 ： 

InfiniteScroll 无限滚动

滚动至底部时，加载更多数据。

    在前端开发中，很多页面都需要实现无限滚动的效果，即