vue3使用addEventListener添加滚动触底加载,执行多次问题

const handleScroll = (e) => {
    let el = e.target
   
  
    if (Number(el.scrollTop + el.clientHeight).toFixed(0) == el.scrollHeight) {
        console.log(currentPage.value, "yema");
        currentPage.value++

        fetchDatas()
    }

上面代码执行多次

解决方案
确保只绑定一次滚动事件处理程序。如果你使用了类似 addEventListener 的方法来绑定事件处理程序,那么在绑定之前最好先解绑旧的事件处理程序。

另外,还可以考虑在绑定事件处理程序时使用 { once: true } 选项,以确保事件只会触发一次。示例代码如下:

// 假设 el 是你要监听滚动事件的 DOM 元素
el.addEventListener('scroll', handleScroll, { once: true });

通过在绑定滚动事件时添加 { once: true } 选项,可以确保滚动事件只会触发一次,从而避免多次触发 handleScroll() 函数。

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值