首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

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

  •  
  •   molvqingtai · 347 天前 · 1193 次点击
    这是一个创建于 347 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我遇到这么个问题哪位大佬提供下思路
    我写了一个 infiniteScroll 组件,通过监听滚动条实现,传入两个 props,一个是控制是否禁用加载的 Boolean 变量,一个是触底后要执行的 function,,现在效果是实现了,但是当手动更改数据后(排序),pageSize 不够撑满 html 的情况下,因为没有滚动条,就不会触发滚动事件
    我想实现的效果是 infiniteScroll 和父组件解耦和 data 的数据无关,只要触底就加载,但是因为 pageSize 的问题我还需要传入第三个 props 做判断,大佬们提供下思路

    就几行代码

    5 回复  |  直到 2018-12-24 16:42:46 +08:00
        1
    tinytin   347 天前   ♥ 1
    用 getBoundingClientRect
        2
    mmmfj   347 天前
    这个代码图片是怎么生成的
        3
    molvqingtai   347 天前
    @mmmfj 一个插件 Carbon
        4
    edwardwo   347 天前   ♥ 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   346 天前
    @edwardwo 问题解决了,感谢大佬!
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4055 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 22ms · UTC 07:48 · PVG 15:48 · LAX 23:48 · JFK 02:48
    ♥ Do have faith in what you're doing.