迫于实现一个 infiniteScroll 组件，求提供思路

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2702 days ago, the information mentioned may be changed or developed.

我遇到这么个问题哪位大佬提供下思路
我写了一个 infiniteScroll 组件，通过监听滚动条实现，传入两个 props，一个是控制是否禁用加载的 Boolean 变量，一个是触底后要执行的 function，，现在效果是实现了，但是当手动更改数据后（排序），pageSize 不够撑满 html 的情况下，因为没有滚动条，就不会触发滚动事件
我想实现的效果是 infiniteScroll 和父组件解耦和 data 的数据无关，只要触底就加载，但是因为 pageSize 的问题我还需要传入第三个 props 做判断，大佬们提供下思路

就几行代码

props

pagesize

滚动

组件

5 replies • 2018-12-24 16:42:46 +08:00

tinytin

Dec 24, 2018

用 getBoundingClientRect

mmmfj

Dec 24, 2018

这个代码图片是怎么生成的

molvqingtai

Dec 24, 2018

@mmmfj 一个插件 Carbon

edwardwo

Dec 24, 2018

listEle.addEventListener('wheel', this.infiniteScroll)
用'wheel' event, 不要用 scroll, scroll 必须有滚动条时才触发. 'wheel' 一滚动, 就触发. 在 infiniteScroll 中再判断:

scrollHeight = listEle.scrollHeight
scrollTop = listEle.scrollTop
offsetHeight = listEle.offsetHeight

if (scrollHeight === scrollTop + offsetHeight) {
this.$emit('loadMore')
}

molvqingtai

Dec 24, 2018

@edwardwo 问题解决了，感谢大佬！