微信小程序 在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.mzph.cn/news/100005.shtml

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

相关文章

c#设计模式-行为型模式 之 中介者模式

&#x1f680;简介 又叫调停模式&#xff0c;定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 从下右图中可以看到&#xff0c;任何一个类的变 动&#xff0c;只会影响的类本身&#xff0c;以及…

【Linux】基本指令-入门级文件操作(一)

目录 前言 ⭕linux的树状文件结构 ⭕绝对路径和相对路径 ⭕当前路径和上级路径 ⭕隐藏文件 基本指令&#xff08;重点&#xff09; 1 pwd 指令 2 mkdir 指令 3 touch 指令 4 ls 指令 4.1 ls只加选项不加文件/目录名&#xff0c;默认查看当前目录下的文件 4.1.1 ls -a…

【香橙派-OpenCV-Torch-dlib】TF损坏变成RAW格式解决方案及python环境配置

前言 本文将介绍在香橙派&#xff08;Orange Pi&#xff09;开发板上进行软件配置和环境搭建的详细步骤&#xff0c;以便运行Python应用程序。这涵盖了以下主要内容&#xff1a; 获取所需软件&#xff1a;提供了香橙派操作系统和balenaEtcher工具的下载链接&#xff0c;以确保…

flutter实现透明appbar(一)

前言 在项目中如何实现透明的appbar&#xff0c;方式一&#xff1a; 使用stack和positioned定位功能把appbar定位到页面的最上面&#xff0c; 实现 实现 Widget build(BuildContext context) {return Scaffold(body: Stack(children: [_homePage(), _appBar()],),);}_appbar…

图片大小转换(对于图片进行压缩)

传入的是图片途径 import java.io.*; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import java.util.Base64;// 限制图像大小为4MB public byte[] limitImageSize(File imageFile, int maxSizeInBytes) throws IOException {if (imageFile.length() …

BuyVM 拉斯维加斯 VPS 测评

description: 发布于 2023-07-05 BuyVM 拉斯维加斯 VPS 测评 产品链接&#xff1a;https://my.frantech.ca/cart.php?gid37 G口不限制流量&#xff0c;抗一般投诉&#xff0c;不抗版权投诉。 中国大陆连通性尚可。 CPU&#xff0c;硬盘速度不错。 规格 $3.50 USD/mo 1G…

js验证字符串是否是时间日期格式

参考文章 验证字符串是否是时间日期格式 返回 布尔值 表示 Dayjs的日期是否通过校验。 不严格的校验 只检查传入的值能否被解析成一个时间日期 dayjs(2022-01-33).isValid(); // true, parsed to 2022-02-02dayjs(some invalid string).isValid(); // false严格校验 检查…

vue中使用ali-oss上传文件到阿里云上

1.使用 npm 安装ali-oss npm install ali-oss --save2.写ali-oss.js // 引入ali-oss let OSS require(ali-oss) let client new OSS({region: oss-cn-xxx, // bucket所在的区域&#xff0c; 默认oss-cn-hangzhousecure: true, // secure: 配合region使用&#xff0c;如果指…

生成多元正态数据

目录 一、mvrnorm()函数使用介绍 例1&#xff1a;生成服从多元正态分布的数据 例2:生成一组服从多元正态分布的观测 一、mvrnorm()函数使用介绍 获取来自给定均值向量和协方差阵的多元正态分布的数据。 MASS包中的mvrnorm()函数可以让这个问题变得很容易&#xff0c;其调用…

win10搭建Selenium环境+java+IDEA(3)

这里主要对前面的maven和selenium做补充说明&#xff0c;以及更新一些pom文件下载依赖的问题。 IDEA里面&#xff0c;如果你创建的工程是maven工程文件&#xff0c;那么就会有一个pom.xml文件&#xff0c;可以在这个网站&#xff1a;https://mvnrepository.com/搜索依赖&#…

【API要返回一棵树的结构】数据库表结构是平铺的数据,但是api要实现树状结构展示。api实现一棵树的结构,如何实现呢,递归?如何递归呢

数据库中的数据是平铺的&#xff0c;一行行的&#xff0c;但是api要查询出来的数据要求是一棵树的结构&#xff0c; 怎么把平铺的数据转换成树状结构呢&#xff1f; public List<CarbonRepo> findCarbonRepo(Integer type){// 1. 先查出所有数据。 baseFindList 方法就是…

基于Keil a51汇编 —— 程序模板文件以及规则

程序模板文件 下面的代码模板包含有关如何编写自己的程序集模块的指南和提示。此模板文件模板。A51 在文件夹 \C51\ASM 中提供。 $NOMOD51 ; 禁用预定义的 8051 寄存器 #include <reg52.h> // 包含头文件; ;根据需要更改小写名称。 ;该汇编模板让你…

[PwnThyBytes 2019]Baby_SQL - 代码审计+布尔盲注+SESSION_UPLOAD_PROGRESS利用

[PwnThyBytes 2019]Baby_SQL 1 解题流程1.1 分析1.2 解题 2 思考总结 1 解题流程 1.1 分析 此题参考文章&#xff1a;浅谈 SESSION_UPLOAD_PROGRESS 的利用 访问正常来讲用ctf-wscan是能扫出source.zip文件的&#xff0c;且F12后提示了有source.zip&#xff0c;那我们就下载…

多项目并行管理:优化协调策略提高效率

多项目同时进行已然是大部分项目管理者面临的现状了。相比于单项目管理&#xff0c;多项目管理可能会出现项目资源分配不均&#xff0c;项目进度监控难以及沟通协作复杂等问题。 可以通过一款灵活高效得项目管理工具&#xff0c;来帮助您进行多项目管理&#xff0c;比如 Zoho …

文件解析的方法与原理

文件的解析使用python的struct模块,接下来会用到的2个方法: 解包unpack()方法 : 使用该方法可以从写好的二进制文件中读出文件。它的函数原型为:struct.unpack(fmt,string),fmt参数是格式字符串。string表示要转换的python值。最终函数返回一个元组。 calcsize()方法 : 该方法用…

【原理学习】互斥量机制与条件变量机制一起使用

互斥量机制 互斥量是多线程机制的一种。互斥量&#xff08;Mutex&#xff09;是一种用于实现线程互斥访问共享资源的机制&#xff0c;通过互斥量可以保证在同一时间内只有一个线程可以访问共享资源&#xff0c;从而避免多线程并发修改共享资源导致的数据不一致问题。 在多线程…

libgedit-amtk和amtk冲突不能升级

[SOLVED] Cant update the system / Pacman & Package Upgrade Issues / Arch Linux Forums sudo pacman -Rd amtk 单独删除 amtk 包就行了。

美容类产品找什么渠道做推广比较好,媒介盒子告诉你

哈喽,大家好,今天媒介盒子小编又来跟大家分享软文推广的干货知识了,本篇分享的主要内容是:美容类产品找什么渠道做推广比较好~ 随着如今生活条件的进步&#xff0c;越来越多人的女性开始注重对自身的保养。她们会在市场上搜罗大量的美容护肤类服务和产品&#xff0c;这也给了无…

MFC文本输出学习

void CTxttstView::OnDraw(CDC* pDC) {CTxttstDoc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw code for native data hereCString str1;pDC->SetBkColor(RGB(0,0,0));pDC->TextOut(50, 50, "一段文字");pDC->SetBkColor(RGB(255,255,255))…

深入浅出:react高阶成分(HOC)的应用

React中的HOC&#xff08;Higher-Order Component&#xff09;是一种高阶组件的模式&#xff0c;它是一个函数&#xff0c;接收一个组件作为参数&#xff0c;并返回一个新的包装组件。HOC可以用于增强组件的功能&#xff0c;例如添加属性、处理生命周期方法、共享状态等。 HOC…