原生js实现scroll触底回调

网上看了几篇文章, 普遍使用@scroll去监听滚动时间, 但是这样好像无法执行监听回调, 可能是我的操作有误.

然后自己查阅了其他资料, 得出了以下方法:

// 首先绑定监听事件回调
onMounted(() => {
  window.addEventListener('scroll', handleScroll, true)
})

const handleScroll = () => {
  if((window.scrollY + window.innerHeight) >= document.body.scrollHeight) {
    // 这里就是滚动到底部了, 将会触发你定义的回调
    // do what you want
  }
}

如有错误, 还希望大佬可以指出, 感谢查阅

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序scroll-view组件可以实现触底加载效果,具体实现方法如下: 首先,在wxml文件中将scroll-view组件的bindscrolltolower属性绑定到一个函数上,例如: <scroll-view bindscrolltolower="loadMoreData"> <!-- 这里是scroll-view的具体内容 --> </scroll-view> 然后,在对应的js文件中,定义loadMoreData函数来处理触底加载的逻辑: Page({ data: { // 这里是页面需要显示的数据 }, loadMoreData: function(e) { // 判断是否已经加载了全部数据,如果是则不进行加载 if (this.data.isLoadedAll) { return; } // 进行加载操作,可以发送请求获取更多的数据 wx.request({ url: 'https://example.com/loadmore', data: { // 这里是传递给后端的参数 }, success: res => { // 将获取到的新数据追加到原有数据的后面 const newData = this.data.dataList.concat(res.data.data); this.setData({ dataList: newData }); // 判断是否已经加载了全部数据,如果是则更新isLoadedAll状态为true if (res.data.isLoadedAll) { this.setData({ isLoadedAll: true }); } } }); } }); 通过上述代码,我们定义了loadMoreData函数来处理触底加载的逻辑。在函数中,首先判断是否已经加载了全部数据,如果是则返回,不进行加载操作。然后,通过wx.request发送请求获取更多的数据,将新数据追加到原有数据的后面,并更新isLoadedAll状态来判断是否已经加载了全部数据。 这样,当用户滑动scroll-view组件的底部时,就会触发loadMoreData函数进行加载操作,实现触底加载的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值