微信小程序在bindscroll事件中监听scroll-view滚动到底

news2024/10/5 21:13:36

scroll-view其实提供了一个 bindscrolltolower 事件这个事件的作用是直接监听scroll-view滚动到底部
但是总有不太一样的情况

公司的项目 scroll-view 内部最下面有一个类名叫 bottombj 的元素
我希望滚动到这个 bottombj 上面的时候就开始加载滚动分页简单说 bottombj这块元素不参与滚动分页
在这里插入图片描述
但 bindscrolltolower 只会判断是否到了当前scroll-view最底部而无法动态拒绝某块元素参与

所以我们只能寄希望于 bindscroll
首先我们要给自己的scroll-view加一个id 方便我们去那这块元素
这里我直接叫 scroll-page
在这里插入图片描述
然后我们在 bindscroll="bindscrolltolower"中直接这样写

const query = wx.createSelectorQuery()
query.select('#scroll-page').boundingClientRect()
query.exec((res) =>{
    if ((e.detail.scrollHeight - e.detail.scrollTop) <= (res[0].height + 1)) {
        console.log("执行滚动分页逻辑");
    }
});

那么我们如果不想bottombjBox参与
这样写

const query = wx.createSelectorQuery()
query.select('#scroll-page').boundingClientRect()
query.select('.bottombjBox').boundingClientRect()
query.exec((res) =>{
    if (((e.detail.scrollHeight-res[1].height) - e.detail.scrollTop) <= (res[0].height + 1)) {
        console.log("执行滚动分页逻辑");
    }
});