Vue无限加载组件原理及示例代码如何改写为长尾关键词？

本文共计3339个文字，预计阅读时间需要14分钟。

目录 + 背景 + 实现功能 + Props + 使用 + 组件实现 + scroll + 事件 + $emit + 发射事件和 props + 回调函数的区别 + 总结 + 背景 + 遇到的两个问题：scroll 事件不触发、如何将 loading 状态放在无限加载组件中进行管理

目录

• 背景
• 实现功能
• Props
• 使用
• 组件实现
• scroll 事件
• $emit 发射事件和 props 回调函数的区别
• 总结

背景

遇到的两个问题：scroll 事件不触发、如何将 loading 状态放在无限加载组件中进行管理。

无限加载组件在展示列表页数据时比较常见。特别是在 H5 列表页中，数据比较多，需要做分页，无限加载组件就是一个非常好的选择。

当列表页数据比较多时，一次性从服务端拿到所有的数据会比较耗时，长时间不展示列表数据，比较影响用户体验。所以对于一般的长列表数据，都会做分页。

首次请求时，只请求第一页数据；当用户上拉即将到达列表底部时，再请求下一页数据，将下一页数据拼接在之前的列表后。