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

scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部

但是 总有不太一样的情况

公司的项目 scroll-view 内部 最下面有一个 类名叫 bottombj 的元素

我希望 滚动到这个 bottombj 上面的时候就开始加载滚动分页 简单说 bottombj这块元素不参与滚动分页

但 bindscrolltolower 只会判断 是否到了当前scroll-view最底部 而无法动态拒绝某块元素参与

所以 我们只能寄希望于 bindscroll

首先 我们要给自己的scroll-view加一个id 方便我们去那这块元素

这里 我直接叫 scroll-page

然后 我们在 bindscroll="bindscrolltolower"中直接这样写

javascript 复制代码
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参与

这样写

javascript 复制代码
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("执行滚动分页逻辑");
    }
});

我们只需要 通过query将 .bottombjBox 一起捕获 因为 后捕获的 bottombjBox 所以他是 1下标

去和总高度减一下就好了

相关推荐
難釋懷7 分钟前
微信小程序案例 - 本地生活(列表页面)
微信小程序·生活·notepad++
皆是梦2 小时前
notepad++ 多行复制拼接
notepad++
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang13 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金15 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview