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

这篇具有很好参考价值的文章主要介绍了微信小程序在bindscroll事件中监听scroll-view滚动到底。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

公司的项目 scroll-view 内部最下面有一个类名叫 bottombj 的元素
我希望滚动到这个 bottombj 上面的时候就开始加载滚动分页简单说 bottombj这块元素不参与滚动分页
微信小程序在bindscroll事件中监听scroll-view滚动到底,微信小程序,notepad++,小程序
但 bindscrolltolower 只会判断是否到了当前scroll-view最底部而无法动态拒绝某块元素参与

所以我们只能寄希望于 bindscroll
首先我们要给自己的scroll-view加一个id 方便我们去那这块元素
这里我直接叫 scroll-page
微信小程序在bindscroll事件中监听scroll-view滚动到底,微信小程序,notepad++,小程序
然后我们在 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("执行滚动分页逻辑");
    }
});