迫于实现一个 infiniteScroll 组件，求提供思路
molvqingtai · molvqingtai · 2018-12-24 11:08:58 +08:00 · 2068 次点击这是一个创建于 2166 天前的主题，其中的信息可能已经有所发展或是发生改变。
我遇到这么个问题哪位大佬提供下思路
我写了一个 infiniteScroll 组件，通过监听滚动条实现，传入两个 props，一个是控制是否禁用加载的 Boolean 变量，一个是触底后要执行的 function，，现在效果是实现了，但是当手动更改数据后（排序），pageSize 不够撑满 html 的情况下，因为没有滚动条，就不会触发滚动事件
我想实现的效果是 infiniteScroll 和父组件解耦和 data 的数据无关，只要触底就加载，但是因为 pageSize 的问题我还需要传入第三个 props 做判断，大佬们提供下思路
就几行代码
我写了一个 infiniteScroll 组件，通过监听滚动条实现，传入两个 props，一个是控制是否禁用加载的 Boolean 变量，一个是触底后要执行的 function，，现在效果是实现了，但是当手动更改数据后（排序），pageSize 不够撑满 html 的情况下，因为没有滚动条，就不会触发滚动事件
我想实现的效果是 infiniteScroll 和父组件解耦和 data 的数据无关，只要触底就加载，但是因为 pageSize 的问题我还需要传入第三个 props 做判断，大佬们提供下思路
就几行代码
 |
1
tinytin 2018-12-24 12:45:01 +08:00  1
用 getBoundingClientRect
|
 |
2
mmmfj 2018-12-24 13:12:43 +08:00
这个代码图片是怎么生成的
|
 |
3
molvqingtai OP @mmmfj 一个插件 Carbon
|
 |
4
edwardwo 2018-12-24 14:37:42 +08:00 1
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') } |
|
5
molvqingtai OP @edwardwo 问题解决了，感谢大佬！
|
Select Language