当前位置: 首页 > news >正文

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

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

我们只需要 通过query将 .bottombjBox 一起捕获 因为 后捕获的 bottombjBox 所以他是 1下标
去和总高度减一下就好了

http://www.lryc.cn/news/190233.html

相关文章:

  • 收银系统商品定价设计思考
  • Kotlin函数作为参数指向不同逻辑
  • 读书笔记—《如何阅读一本书》
  • Kafka数据同步原理详解
  • C++课程总复习
  • 数据结构—顺序表
  • 企业服务器租用对性能有什么要求呢?
  • 2731.移动机器人
  • 相交链表Java
  • 第二章:OSI参考模型与TCP/IP模型
  • 知识图谱04——openGL与ubuntu22.04
  • 如何看待为了省小钱而花费时间
  • Maven Eclipse
  • Linux:redis集群(3.*版本 和 5.*版本)搭建方法
  • 正则表达式基础语法
  • 数据库常见面试题--MySQL
  • Springboot 集成 Redis集群配置公网IP连接报私网IP连接失败问题
  • 解决方案 | 法大大电子签精准击破销售场景签约难题
  • ARM按键中断控制事件
  • 微信小程序之本地生活(九宫格)
  • 【Linux 安装Kibana 及 Es 分词器安装】
  • python-arima模型statsmodels库实现-有数据集(续)-statsmodels-0.9.0版本
  • JVM源码剖析之线程的创建过程
  • ansible的介绍安装与模块
  • el-form简单封装一个列表页中的搜索栏
  • 【Python 2】列表 模式匹配 循环 dict set 可变对象与不可变对象
  • 深度学习—cv动物/植物数据集
  • 高效团队协作软件推荐:提升工作效率的优选方案!
  • Mac中使用virtualenv和virtualenvwrapper
  • wpf webBrowser控件 常用的函数和内存泄漏问题