微信小程序 在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.rhkb.cn/news/157859.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dockerfile 搭建lnmp+wordpress,docker-compose搭建lnmp+wordpress

目录 dockerfile 搭建lnmpwordpress 部署nginx&#xff08;容器IP 为 172.18.0.10&#xff09; 部署mysql&#xff08;容器IP 为 172.18.0.20&#xff09; 部署php&#xff08;容器IP 为 172.18.0.30&#xff09; docker-compose搭建lnmpwordpress dockerfile 搭建lnmpword…

TCP/IP(十一)TCP的连接管理(八)socket网络编程

一 socket网络编程 socket 基本操作函数 bind、listen、connect、accept、recv、send、select、close 说明: 本文需要C语言、syscall系统调用、OS 操作系统基础理论,如果不了解可以暂时跳过目标&#xff1a; 知道对应库函数的更底层机制思考&#xff1a; socket函数与FIN、A…

VSCode怎么创建Java项目

首先安装好Java的开发环境&#xff1a;JDK在VSCode中安装适用于Java开发的插件。打开VSCode&#xff0c;点击左侧的扩展图标&#xff0c;搜索并安装Java Extension Pack插件。等待安装完成后&#xff0c;重启VSCode生效。创建一个新的Java项目&#xff0c;按下Ctrl Shift P&a…

微软和OpenAI正在开发AI芯片, 并计划下个月发布

今年初&#xff0c;Chat**引起了无数网友关注&#xff0c;一度成为了热门话题。这是由人工智能研究实验室OpenAI开发的一款聊天机器人模型&#xff0c;也称为一种人工智能&#xff08;AI&#xff09;技术驱动的自然语言处理工具。能够通过学习和理解人类的语言来进行对话&#…

[华为杯研究生创新赛 2023] 初赛 REV WP

前言 一年没打比赛了, 差一题进决赛, REV当时lin的第三个challenge没看出来是凯撒, 想得复杂了, 结果错失一次线下机会 >_< T4ee 动态调试, nop掉反调试代码 发现处理过程为 置换sub_412F20处理(这里看其他师傅的wp知道应该是rc4, 我是直接en逆的buf字符串中每一位和…

text-stroke描边

text-stroke 描边 css 代码 设置基础的样式 -webkit-text-stroke使用webkit内核设置文字描边效果&#xff0c;当文字为透明或者是其它颜色都可以由相同的效果 body {background: linear-gradient(to right, #f3f344, #fd8b18, #f13d39, #90108f); }.out {position: relative;…

专业音视频领域中,Pro AV的崛起之路

编者按&#xff1a;在技术进步的加持下&#xff0c;AV行业发展得如何了&#xff1f;本文采访了两位深耕于广播电视行业的技术人&#xff0c;为我们介绍了专业音视频的进展&#xff1a;一位冉冉升起的新星&#xff1a;Pro AV以及FPGA在其中发挥的作用。 美国&#xff0c;拉斯维加…

【Java学习之道】GUI开发的基本概念

引言 在这一章&#xff0c;我们将一起走进Java的图形用户界面&#xff08;GUI&#xff09;开发的世界。在你阅读完这篇文章后&#xff0c;你将能够了解什么是GUI&#xff0c;以及如何使用Java进行GUI的开发。 一、什么是GUI 首先&#xff0c;让我们来解答一个许多初学者都会…

001flutter基础学习

flutter基础学习 参考:https://book.flutterchina.club/chapter1/flutter_intro.html Flutter是谷歌的移动UI框架跨平台: Linux,Android, IOS,Fuchsia原生用户界面:它是原生的,让我们体验更好,性能更好开源免费&#xff1a;完全开源,可以进行商用Flutter与主流框架的对比 Cor…

BI工具:让数据分析井然有序一望而知

BI&#xff08;Business Intelligence&#xff09;工具是一类专门用于数据分析和决策支持的软件工具。 它们能够将企业内部和外部的数据进行整合、处理和可视化&#xff0c;帮助用户从海量数据中获取有价值的见解和洞察&#xff0c;并以直观、易懂的方式展示给决策者和相关人员…

centos离线安装telnet、traceroute工具

安装包下载地址 安装包下载地址在这里 直接输入包名&#xff0c;筛选系统&#xff0c;根据自己系统版本确定该下哪个包 centos离线安装telnet 准备三个安装包 xinetd-2.3.15-14.el7.x86_64.rpmtelnet-server-0.17-65.el7_8.x86_64.rpmtelnet-0.17-65.el7_8.x86_64.rpm 三个…

开源数据库MySQL 8.0 OCP认证精讲视频、环境和题库 之三 选项、变量

选项文件&#xff1a;默认/etc/my.cnf 可以通过以下选项&#xff0c;指定选项文件&#xff1a; -defaults-file&#xff1a;指定选项文件 例如:mysql--defaults-file/etc/my.cnf -no-defaults&#xff1a;不读任何选项文件&#xff0c;所有选项需要在命令行中指定 -defaults-ex…

CVE-2020-9483 apache skywalking SQL注入漏洞

漏洞概述 当使用H2 / MySQL / TiDB作为Apache SkyWalking存储时&#xff0c;通过GraphQL协议查询元数据时&#xff0c;存在SQL注入漏洞&#xff0c;该漏洞允许访问未指定的数据。 Apache SkyWalking 6.0.0到6.6.0、7.0.0 H2 / MySQL / TiDB存储实现不使用适当的方法来设置SQL参…

appium---如何判断原生页面和H5页面

目前app中存在越来越多的H5页面了&#xff0c;对于一些做app自动化的测试来说&#xff0c;要求也越来越高&#xff0c;自动化不仅仅要支持原生页面&#xff0c;也要可以H5中进行操作自动化&#xff0c; webview是什么 webview是属于android中的一个控件&#xff0c;也相当于一…

Leetcode101.对称二叉树

本专栏内容为&#xff1a;leetcode刷题专栏&#xff0c;记录了leetcode热门题目以及重难点题目的详细记录 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;Leetcode &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &…

GraphQL 查询:一个全面指南

GraphQL GraphQL 是一种 API 查询语言和运行时&#xff0c;用于使用现有数据完成这些查询。它为您的 API 中的数据提供了完整且易于理解的描述&#xff0c;让客户能够准确地询问他们需要什么&#xff0c;更容易随着时间的推移发展 API&#xff0c;并启用强大的开发人员工具。 …

Linux系统编程_文件编程第1天:打开、写入、读取、关闭文件等编程

1. 文件编程概述&#xff08;399.1&#xff09; 内容超多&#xff1a; 文件系统原理及访问机制文件在内核中的管理机制什么是文件信息节点inode文件的共享文件权限&#xff0c;各种用户对其权限。。。。。。 应用为王&#xff0c;如&#xff1a; 账单游戏进度配置文件等 关心如…

Apache Doris 在小鹅通的应用实践

峰会官网已上线&#xff0c;最新议程请关注&#xff1a;doris-summit.org.cn 点击报名 先到先得 本文导读&#xff1a; 随着网络直播规模的不断扩大&#xff0c;在线知识服务在直播行业中迎来了广阔的发展机遇。小鹅通作为一家以用户服务为核心的技术服务商&#xff0c;通过多平…

简单实现一个todoList(上移、下移、置顶、置底)

演示 html部分 <!DOCTYPE html> <html> <head><title>表格示例</title> </head> <body><table border"1"><thead><tr><th>更新时间</th><th>操作</th></tr></thead…

2023-10-12 LeetCode每日一题(找出数组的串联值)

2023-10-12每日一题 一、题目编号 2562. 找出数组的串联值二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的整数数组 nums 。 现定义两个数字的 串联 是由这两个数值串联起来形成的新数字。 例如&#xff0c;15 和 49 的串联是 1549 。 nums 的 串…