微信小程序—页面滑动,获取可视区域数据
需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。
实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素
如下简单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//可做后续逻辑处理})},
})
相关文章:
微信小程序—页面滑动,获取可视区域数据
需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。 实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,…...
C#语言进阶(一)—委托
总目录 C# 语法总目录 委托 委托1. 基本用法2.委托作为方法参数3.多播委托4.实例对象方法、静态方法与委托之间的关系5. 委托类型参数为泛型6. System空间下的 Func 委托和 Action 委托 委托 委托类似于CPP中的函数指针。它定义了一个方法类型,这个方法类型有返回类…...
VST3音频插件技术介绍
一.概述 1.VST3介绍 VST3(Virtual Studio Technology 3)是一种音频插件格式,由Steinberg公司开发,用于在数字音频工作站(DAW)中使用。VST3插件可以是模拟合成器、鼓机、混响器、压缩器等多种类型的音频处理…...
MySQL数据库管理 二
1、数据表高级操作 (1)克隆表 方法一: create table 新表名 like 旧表名; #克隆表结构 insert into 新表名 select * from 旧表名; #克隆表数据 #此方法能保证 新表的表结构、表数据 跟旧表都是一致的 方法二&#x…...
android system UI 基础的基础
Android 系统中的 SystemUI 是一种特殊的应用程序,它负责管理和显示设备的用户界面组件,例如状态栏、导航栏和最近任务列表等。SystemUI 是在 Android 启动过程中由 Zygote 进程启动的。以下是 SystemUI 启动过程的详细步骤: SystemUI 启动过…...
ARM32开发——GD32F4定时器查询
🎬 秋野酱:《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录...
【机器学习】第7章 集成学习(小重点,混之前章节出题但小题)
一、概念 1.集成学习,顾名思义,不是一个玩意,而是一堆玩意混合到一块。 (1)基本思想是先 生成一定数量基学习器,再采用集成策略 将这堆基学习器的预测结果组合起来,从而形成最终结论。 &#x…...
代码随想录——子集Ⅱ(Leecode 90)
题目链接 回溯 class Solution {List<List<Integer>> res new ArrayList<List<Integer>>();List<Integer> list new ArrayList<Integer>();boolean[] used; public List<List<Integer>> subsetsWithDup(int[] nums) {use…...
vue关闭页面时触发的函数(ai生成)
在Vue中,可以通过监听浏览器的beforeunload事件来在关闭页面前触发函数。这里是一个简单的示例: new Vue({el: #app,methods: {handleBeforeUnload(event) {// 设置returnValue属性以显示确认对话框event.returnValue 你确定要离开吗?;// 在…...
马尔可夫性质与Q学习在强化学习中的结合
马尔可夫性质是强化学习(RL)算法的基础,特别是在Q学习中。马尔可夫性质指出,系统的未来状态只依赖于当前状态,而与之前的状态序列无关。这一性质简化了学习最优策略的问题,因为它减少了状态转移的复杂性。 …...
【LeetCode 5.】 最长回文子串
一道题能否使用动态规划就在于判断最优结构是否是通过最优子结构推导得到?如果显然具备这个特性,那么就应该朝动态规划思考。如果令dp[i][j]表示串s[i:j1]是否是回文子串,那么判断dp[i][j] 是否是回文子串,相当于判断s[i] 与 s[j]…...
联邦学习周记|第四周
论文:Active Federated Learning 链接 将主动学习引入FL,每次随机抽几个Client拿来train,把置信值低的Client概率调大,就能少跑几次。 论文:Active learning based federated learning for waste and natural disast…...
机器学习课程复习——逻辑回归
1. 激活函数 Q:激活函数有哪些? SigmoidS型函数Tanh 双曲正切函数...
Rocky Linux 更换CN镜像地址
官方镜像列表,下拉查找 官方镜像列表:https://mirrors.rockylinux.org/mirrormanager/mirrorsCN 开头的站点。 一键更改镜像地址脚本 以下是更改从默认更改到阿里云地址 cat <<EOF>>/RackyLinux_Update_repo.sh #!/bin/bash # -*- codin…...
Linux rm命令由于要删的文件太多报-bash: /usr/bin/rm:参数列表过长,无法删除的解决办法
银河麒麟系统,在使用rm命令删除文件时报了如下错误,删不掉: 查了一下,原因就是要删除的文件太多了,例如我当前要删的文件共有这么多: 查到了解决办法,记录在此。需要使用xargs命令来解决参数列表…...
【包管理】Node.JS与Ptyhon安装
文章目录 Node.JSPtyhon Node.JS Node.js的安装通常包括以下几个步骤: 访问Node.js官网: 打开Node.js的官方网站(如:https://nodejs.org/zh-cn/download/)。 下载安装包: 根据你的操作系统选择对应的Node…...
SpringMVC系列四: Rest-优雅的url请求风格
Rest请求 💞Rest基本介绍💞Rest风格的url-完成增删改查需求说明代码实现HiddenHttpMethodFilter机制注意事项和细节 💞课后作业 上一讲, 我们学习的是SpringMVC系列三: Postman(接口测试工具) 现在打开springmvc项目 💞Rest基本介…...
Hexo 搭建个人博客(ubuntu20.04)
1 安装 Nodejs 和 npm 首先登录NodeSource官网: Nodesource Node.js DEB 按照提示安装最新的 Node.js 及其配套版本的 npm。 (1)以 sudo 用户身份运行下面的命令,下载并执行 NodeSource 安装脚本: sudo curl -fsSL…...
【论文阅读】-- Attribute-Aware RBFs:使用 RT Core 范围查询交互式可视化时间序列颗粒体积
Attribute-Aware RBFs: Interactive Visualization of Time Series Particle Volumes Using RT Core Range Queries 摘要1 引言2 相关工作2.1 粒子体渲染2.2 RT核心方法 3 渲染彩色时间序列粒子体积3.1 场重构3.1.1 密度场 Φ3.1.2 属性字段 θ3.1.3 优化场重建 3.2 树结构构建…...
A类IP介绍
1)A类ip给谁用: 给广域网用,公网ip使用A类地址,作为公网ip时,Ip地址是全球唯一的。 2)基本介绍 ip地址范围 - 理论范围 0.0.0.0 ~127.255.255.255:00000000 00000000 00000000 00000000 ~ 0111…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
