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

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

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

    就几行代码

    5 条回复    2018-12-24 16:42:46 +08:00
    tinytin
        1
    tinytin  
       2018-12-24 12:45:01 +08:00   ❤️ 1
    用 getBoundingClientRect
    mmmfj
        2
    mmmfj  
       2018-12-24 13:12:43 +08:00
    这个代码图片是怎么生成的
    molvqingtai
        3
    molvqingtai  
    OP
       2018-12-24 13:13:52 +08:00
    @mmmfj 一个插件 Carbon
    edwardwo
        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')
    }
    molvqingtai
        5
    molvqingtai  
    OP
       2018-12-24 16:42:46 +08:00
    @edwardwo 问题解决了,感谢大佬!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5241 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:55 · PVG 16:55 · LAX 00:55 · JFK 03:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.