微信小程序—页面滑动,获取可视区域数据

需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。

实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素

如下简单html结构
//列表
<view class="list">// 每个条目<view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>
js方法
  • 如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可
最终得到的visibleItems即为可视区域的数据,是一个数组,可通过每个元素的dataset获取绑定在元素上的字段,如上述html中的字段id
Page({//....其他逻辑let scrollTimer = null  //定义一个全局的滑动定时器 用来判断是否正在滑动,如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可//页面滑动监听方法onPageScroll: function (e) {//一直滑动 一直清楚 直到滑动停止1s后,执行获取方法if(scrollTimer){clearTimeout(scrollTimer)}// 赋值延迟方法 停止滑动后执行scrollTimer = setTimeout(() => {this.getVisibleItems()}, 1000);},getVisibleItems(){//创建一个选择器const query = wx.createSelectorQuery().in(this);//获取列表内所有条目元素 在界面的位置信息query.selectAll('.item').boundingClientRect();query.selectViewport().scrollOffset();query.exec((res) => {//所有选中的条目数据const listItemRects = res[0];//获取设备的视口高度 (如果有底导航其他固定底部的元素可在此减去其高度)const viewportHeight = wx.getSystemInfoSync().windowHeight;// 获取可见的列表项const visibleItems = listItemRects.filter(rect => {//元素局顶部的距离 (如果顶部有固定的tab或导航栏可在此减去其高度)console.log(rect.top) console.log(viewportHeight)// 元素距离顶部的距离在此范围内 即认为在可视范围内return rect.top && rect.top < viewportHeight;})//visibleItems即为可视区域的数据,是一个数组,可通过dataset获取绑定在元素上的字段,如上述html中的字段id//可做后续逻辑处理})},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/26252.shtml

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

相关文章

Day 16:3040. 相同分数的最大操作数目II

Leetcode 相同分数的最大操作数目II 给你一个整数数组 nums &#xff0c;如果 nums 至少 包含 2 个元素&#xff0c;你可以执行以下操作中的 任意 一个&#xff1a; 选择 nums 中最前面两个元素并且删除它们。选择 nums 中最后两个元素并且删除它们。选择 nums 中第一个和最后一…

Adobe Photoshop cc快速抠图与精致抠图方法

一、背景 Photoshop cc绝对是最好用的抠图and修图软件&#xff0c;但是即使最简单的抠图&#xff0c;每次用时都忘记怎么做&#xff0c;然后再去B站搜&#xff0c;非常费时&#xff0c;下面记录一下抠图过程&#xff0c;方便查阅。 一、Adobe Photoshop快速抠图 选择——主体…

Python连接Oracle数据库:cx_Oracle与oracledb库的比较与选择

文章目录 一、概述cx_Oracleoracledb 二、安装Oracle Instant client三、Python测试cx_Oracle&#xff1a;oracledb&#xff1a; 一、概述 Python 访问 Oracle可以通过两种Oracle官方库&#xff1a; 旧驱动&#xff1a;cx_Oracle&#xff08;需要安装Oracle Instant client&a…

大模型基础——从零实现一个Transformer(3)

大模型基础——从零实现一个Transformer(1)-CSDN博客 大模型基础——从零实现一个Transformer(2)-CSDN博客 一、前言 之前两篇文章已经讲了Transformer的Embedding,Tokenizer,Attention,Position Encoding, 本文我们继续了解Transformer中剩下的其他组件. 二、归一化 2.1 L…

C++--DAY7

vector容器 #include <iostream> #include <vector>using namespace std; void printVector(vector<int> &v) {//定义一个迭代器 指针vector<int>::iterator iter;//v.end&#xff08;&#xff09;是最后一个元素的下一个元素地址for(iterv.begin…

申请郑州水污染防治乙级资质,这些材料你需要提前准备

申请郑州水污染防治乙级资质时&#xff0c;你需要提前准备以下材料&#xff0c;以确保申请流程的顺利进行&#xff1a; 一、企业基本材料 企业法人营业执照副本复印件&#xff1a;需加盖企业公章&#xff0c;确保复印件清晰、完整。企业章程文本&#xff1a;提供企业章程的完整…

渗透测试作为一种主动且深入的安全检查手段

在当今这个数据为王的时代&#xff0c;企业信息系统的安全性成为了关乎存亡的生命线。一个微小的漏洞&#xff0c;足以让黑客乘虚而入&#xff0c;导致数据泄露、服务中断乃至品牌信任的崩塌。正因如此&#xff0c;渗透测试作为一种主动且深入的安全检查手段&#xff0c;正逐步…

php 一个简单的后台操作日志封装

SystemLogModel.php 为系统日志类&#xff0c;LogModel.php 为业务日志类。有一个全局自动根据路由写入日志(入参和响应等内容)的话更好。 <?phpnamespace common\models\common;use backend\helpers\AdminHelper; use common\helpers\MessageHelper; use common\models\B…

网络安全在2024好入行吗?

前言 024年的今天&#xff0c;慎重进入网安行业吧&#xff0c;目前来说信息安全方向的就业对于学历的容忍度比软件开发要大得多&#xff0c;还有很多高中被挖过来的大佬。 理由很简单&#xff0c;目前来说&#xff0c;信息安全的圈子人少&#xff0c;985、211院校很多都才建立…

Java课程设计:基于ssm的旅游管理系统系统(内附源码)

文章目录 一、项目介绍二、项目展示三、源码展示四、源码获取 一、项目介绍 2023年处于信息科技高速发展的大背景之下。在今天&#xff0c;缺少手机和电脑几乎已经成为不可能的事情&#xff0c;人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大旅行社非常必要…

鸿蒙开发文件管理:【@ohos.securityLabel (数据标签)】

数据标签 该模块提供文件数据安全等级的相关功能&#xff1a;向应用程序提供查询、设置文件数据安全等级的JS接口。 说明&#xff1a; 本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import security…

iOS ReactiveCocoa MVVM

学习了在MVVM中如何使用RactiveCocoa&#xff0c;简单的写上一个demo。重点在于如何在MVVM各层之间使用RAC的信号来更方便的在各个层之间进行响应式数据交互。 demo需求&#xff1a;一个登录界面(登录界面只有账号和密码都有输入&#xff0c;登录按钮才可以点击操作)&#xff0…

白酒:茅台镇白酒的口感特点与品质保障

当我们谈及中国的白酒&#xff0c;茅台镇无疑是其中璀璨的一颗明珠。而在这片神奇的土地上&#xff0c;云仓酒庄凭借其与众不同的酿造工艺和卓着的品质保障&#xff0c;成为了茅台镇白酒的新一代佼佼者。今天&#xff0c;让我们一起领略云仓酒庄豪迈白酒的口感特点和品质魅力。…

win11 修改hosts提示无权限

win11下hosts的文件路径 C:\Windows\System32\drivers\etc>hosts修改文件后提示无权限。 我做了好几个尝试&#xff0c;都没个啥用~比如&#xff1a;右键 管理员身份运行&#xff0c;在其他版本的windows上可行&#xff0c;但是win11不行&#xff0c;我用的是微软账号登录的…

【Ardiuno】实验使用ESP32单片机实现高级web服务器暂时动态图表功能(图文)

接下来&#xff0c;我们继续实验示例代码中的Wifi“高级web服务器”&#xff0c;配置相关的无线密码后&#xff0c;开始实验 #include <WiFi.h> #include <WiFiClient.h> #include <WebServer.h> #include <ESPmDNS.h>const char *ssid "XIAOFE…

高通Android 12 右边导航栏改成底部显示

最近同事说需要修改右边导航栏到底部&#xff0c;问怎么搞&#xff1f;然后看下源码尝试下。 1、Android 12修改代码路径 frameworks/base/services/core/java/com/android/server/wm/DisplayPolicy.java a/frameworks/base/services/core/java/com/android/server/wm/Display…

快速排序!

快速排序 算法思想partition函数函数签名变量定义选择基准元素初始化指针遍历并分区最终交换返回基准元素的位置完整函数 QuickSort函数函数定义终止条件划分(partition)递归调用 完整函数 算法思想 partition函数 partition函数是快速排序算法中的一个关键部分。它的作用是将…

测试bert_base不同并行方式下的推理性能

测试bert_base不同并行方式下的推理性能 一.测试数据二.测试步骤1.生成bert配置文件2.安装依赖3.deepspeed 4卡tp并行4.FSDP 4卡并行5.手动将权值平均拆到4张卡,单进程多卡推理6.手动切分成4份,基于NCCL实现pipeline并行 本文测试了bert_base模型在不同并行方式下的推理性能 约…

最短路径与最小生成树:Dijkstra、Prim与Kruskal算法详解

在图论中&#xff0c;最短路径和最小生成树问题是两个重要的课题。本文将介绍三种经典的算法&#xff1a;Dijkstra、Prim和Kruskal&#xff0c;并对它们进行对比分析。我们将讨论这些算法解决的问题、各自的优劣性以及它们之间的异同点&#xff0c;并提供完整的代码示例。 Dij…

为什么电容两端电压不能突变

我们先从RC延时电路说起吧&#xff0c;图1是最简单的RC延时电路&#xff0c;给一个阶跃的电压信号&#xff0c;电压会变成黄色曲线这个样子&#xff0c;这是为什么呢&#xff1f; 图1 电压跳变后&#xff0c;电源负极电子移动到电容下极板&#xff0c;排斥上极板电子流动到电源…