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

news/2024/7/20 2:13:38 标签: 微信小程序, notepad++, 小程序

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.niftyadmin.cn/n/5082242.html

相关文章

网络代理技术的威力:保障安全、保护隐私

在如今高度互联的数字时代&#xff0c;网络代理技术正在崭露头角&#xff0c;为网络工程师和普通用户提供了保障网络安全和隐私的强大工具。本文将深入探讨Socks5代理、IP代理以及它们在网络安全、爬虫开发和HTTP协议中的关键作用。 1. Socks5代理&#xff1a;多功能的网络中继…

面试经典150题——Day7

文章目录 一、题目二、题解 一、题目 121. Best Time to Buy and Sell Stock You are given an array prices where prices[i] is the price of a given stock on the ith day. You want to maximize your profit by choosing a single day to buy one stock and choosing a…

PHP LFI 利用临时文件Getshell

PHP LFI 利用临时文件 Getshell 姿势-安全客 - 安全资讯平台 LFI 绕过 Session 包含限制 Getshell-安全客 - 安全资讯平台 目录 PHP LFI 利用临时文件Getshell 临时文件 linux 和 windows的 临时文件存储规则 linux和windows对临时文件的命名规则 PHPINFO()特性 原理 条…

hive变更数据过程

创建测试表 -- 測試數據集use default; drop table if exists test3; CREATE TABLE if not exists test3(id string,name string,create_date string,last_modified_date string,amount double,is_delete int )partitioned by (dt string) row format delimited fields term…

Vue之VueX知识探索(一起了解关于VueX的新世界)

目录 前言 一、VueX简介 1. 什么是VueX 2. VueX的作用及重要性 3. VueX的应用场景 二、VueX的使用准备工作 1. 下载安装VueX 2. vuex获取值以及改变值 2.1 创建所需示例 2.2 将创建好的.vue文件页面显示 2.3 创建VueX的相关文件 2.4 配置VueX四个js文件 2.5 加载到vue示…

速通RabbitMQ的五种常见消费模型

目录 引言1. 简单队列模型&#xff08;Simple Queue Model&#xff09;优缺点及适用场景代码示例 2. 工作队列模型&#xff08;Work Queue Model&#xff09;优缺点及适用场景代码示例 3. 发布/订阅模型&#xff08;Publish/Subscribe Model&#xff09;优缺点及适用场景代码示…

leetcode做题笔记169. 多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 示例 …

Linux内存管理 | 二、虚拟地址空间布局

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强企业&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …