本文详细介绍了在使用 Vue infinite scroll 库时遇到无法触发滚动事件的问题，通过阅读源码和调试，发现问题可能出在组件的 mounted 生命周期钩子。通过将 v-if 替换为 v-show 解决了问题，原因是 v-if 在元素不渲染时，相关事件绑定未执行，而 v-show 则会在初次渲染时执行。同时分享了npm包的调试经验。
1. 场景说明
我们的前端项目中主要用第三方库vue-infinite-scroll来实现无限滚动列表。然而，在最近写一个需求时，发现基于vue-infinite-scroll来实现列表的无限滚动时，会有无法触发滚动事件的问题。这样导致了列表滚动到底部时，无法拉取新的数据。经过查阅第三方库vue-infinite-scroll的官方文档，以及参考项目中使用到此库的其他地方，发现在用法上没有什么异常。就此基于查看源码去做一个详细的研究。
- 源代码阅读 & 猜想
=============
在node_modules下面找到了vue-infinite-scroll库所在的地方，很幸运，打包后的代码没有压缩成完全看不懂的样子，且仅有简短的236行。这意味着我们理解代码的时间不需要太长。同时，后面我们能够直接修改打包后的文件来进行调试，验证研究中的各种猜想。
按照职能阅读： 尽管代码量不大，但以快速解决问题为目的。我们还是需要避重就轻，只阅读对解决问题有必要的部分即可。通过略读代码，根据函数名划分函数职能，可以帮助我们很好地做到这一点。
- 简单工具类函数：
getScrollTop，getVisibleHeight，getElementTop等，从函数名看出它们的主要职能都是获取列表元素的一些基本属性，加以处理来实现无限滚动。而我
最低0.47元/天 解锁文章
扫一扫
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
