uniapp获取内容高度

news2024/12/22 10:15:35

获取内容高度

getNewsHieght(index) {
		uni.createSelectorQuery().select(`.content_${index}`).boundingClientRect(rect => {
			console.log('打印该盒子的元素', rect.height);
			swiperHeight.value = rect.height
			// console.log('打印swiperHeight的数值',this.swiperHeight);
		}).exec()
	}

H5配合 MutationObserver 监听 DOM 变化
MutationObserver 是监听 DOM 变化的更精准方案,适合动态列表渲染的场景

function watchHeight(){
	   const targetNode = document.getElementsByClassName(`content_0`)[0];
	   console.log(targetNode);
	   const observer = new MutationObserver((mutationsList, observer) => {
	     for (const mutation of mutationsList) {
	       if (mutation.type === 'childList') {
	           getNewsHieght(0)
	         // 停止观察(如果只需要执行一次)
	         observer.disconnect();
	       }
	     }
	   });
	   
	   observer.observe(targetNode, {
	     childList: true, // 监听子节点的变化
	     subtree: false,  // 不监听后代节点
	   });

   }

获取高度后赋值到指定的元素上,多用于设置swiper高度

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

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

相关文章

Fiddler勾选https后google浏览器网页访问不可用

一、说明 最近电脑重新安装系统后,之前的所有工具都需要重新安装和配置,有个项目需要抓包https包查看一下请求的内容,通过Fiddler工具,但是开启后,发现https的无法抓取,同时google浏览器也不无法访问互联网…

OpenAI 12天发布会(12 Days of OpenAI)总结

在OpenAI的“12 Days of OpenAI”活动中,每一天都会发布新的功能或技术,展示公司在AI领域的最新进展。首先展示下全部功能发布完成后,现在ChatGPT的界面: 以下是每一天的简要概述及其意义: 第1天 - 完整版O1模型 今天…

LLaMA-Factory 单卡3080*2 deepspeed zero3 微调Qwen2.5-7B-Instruct

环境安装 git clone https://gitcode.com/gh_mirrors/ll/LLaMA-Factory.git 下载模型 pip install modelscope modelscope download --model Qwen/Qwen2.5-7B-Instruct --local_dir /root/autodl-tmp/models/Qwen/Qwen2.5-7B-Instruct 微调 llamafactory-cli train \--st…

Vue3组件封装技巧与心得

摘要: 日常开发中,用Vue组件进行业务拆分,代码解耦是一个很好的选择; 今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得,希望能够帮助到大家; 1. 组件特性: 在Vue中组件是一个独立的…

图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

文章目录 官网编译文档链接官网SDK下载链接1、下载 Camport ROS1 SDK1.下载git2、下载链接 2、准备编译工作1、安装 catkin2、配置环境变量3. 将Camport3中的linux库文件拷贝到 user/lib目录下4、修改lunch文件制定相机(可以放在最后可以参考在线文档)**…

十二、从0开始卷出一个新项目之瑞萨RZN2L 基于IAR coremark fsp200工程构建和iar icf链接文件修改方法

目录 一、概述 二、rzn2l_fsp2.0.0_coremark工程构建 2.1 目录结构 2.2 项目一览 2.3 iar工程打开报错如何处理 三、代码优化的问题 3.1 system.c中复制内存 3.2 iar代码优化等级与volatile关键字 3.3 iar配置优化单个文件与预编译宏的范围 四、iar .icf链接文件修改…

内容与资讯API优质清单

作为开发者,拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源,为你的开发工作提供了强大的支持!无论你是在构建网站、开发应用还是进行数据分析,这个合集都能满足你的需求。你可以通过这些免费API获…

线程知识总结(二)

本篇文章以线程同步的相关内容为主。线程的同步机制主要用来解决线程安全问题,主要方式有同步代码块、同步方法等。首先来了解何为线程安全问题。 1、线程安全问题 卖票示例,4 个窗口卖 100 张票: class Ticket implements Runnable {priv…

多智能体/多机器人网络中的图论法

一、引言 1、网络科学至今受到广泛关注的原因: (1)大量的学科(尤其生物及材料科学)需要对元素间相互作用在多层级系统中所扮演的角色有更深层次的理解; (2)科技的发展促进了综合网…

OB删除1.5亿数据耗费2小时

目录 回顾:mysql是怎么删除数据的? 删除方案 代码实现 执行结果 结论 本篇是实际操作 批量处理数据以及线程池线程数设置 记录学习 背景:有一张用户标签表,存储数据量达4个亿,使用OceanBase存储,由于…

简洁IIC协议讲述

目录 一:首先,IIC传输是在2条线上传输的。 二:时钟信号的频率和占空比解释(可以看作PWM波形) 三:传输信号的流程图(起始和终止信号都是由主机(我)控制) 四:开始信号和…

IIC I2C子协议 SMBus协议 通信协议原理 时序 SMBus深度剖析

引言:系统管理总线(SMBus)是一种双线接口,通过该接口,各种系统组件芯片和设备可以相互以及与系统其他部分通信。它基于IC总线的操作原理。附录B提供了一些SMBus特性与IC总线不同的方式的描述。 SMBus为系统和电源管理相…

重拾设计模式--建造者模式

文章目录 建造者模式(Builder Pattern)概述建造者模式UML图作用:建造者模式的结构产品(Product):抽象建造者(Builder):具体建造者(Concrete Builder&#xff…

Orleans异常传递测试

Orleans具备非常简单的异常传递机制,Grain或Placement注解逻辑抛异常,可以直接传递到客户端,测试代码如下: 首先在客户端、Silo服务程序的Main方法增加ThreadException事件处理函数,避免未处理异常导致进程闪退。 sta…

【Linux进程】基于管道实现进程池

目录 前言 1. 进程池 1.1 基本结构: 1.2. 池化技术 1.3. 思路分析 1.4. 代码实现 总结 前言 上篇文章介绍了管道及其使用,本文在管道的基础上,通过匿名管道来实现一个进程池; 1. 进程池 父进程创建一组子进程,子进…

PCL点云库入门——PCL库中点云数据拓扑关系之K-D树(KDtree)

1、点云的拓扑邻域 在三维空间数据处理的领域中,点云的邻域概念显得尤为关键,它不仅链接了点云数据之间的拓扑结构,而且在构建点云间的拓扑关系时起到了桥梁的作用。这种关系的建立,使得我们能够以一种高效、迅速的方式管理庞大的…

Leecode刷题C语言之根据第k场考试的分数排序

执行结果:通过 执行用时和内存消耗如下: int gk 0;int compare(const void* a, const void* b) {int* ua *(int**)a;int* ub *(int**)b;return ub[gk] - ua[gk]; }int** sortTheStudents(int** score, int scoreSize, int* scoreColSize, int k, int* returnSiz…

由popover框一起的操作demo问题

场景: 当popover框弹出的时候,又有MessageBox 提示,此时关闭MessageBox 提示,popover就关闭了。将popover改为手动激活,可以解决这个问题,但是会引起另外一个问题,之前(click触发的时…

QT修改运行窗口的图标

首先,在.pro下添加两行: Debug:DESTDIR $$PWD Release:DESTDIR $$PWD 指定目标文件的路径 指定生成的debug和release文件夹路径在当前项目下 上面是为了防止爆奇怪的错 右键项目添加新文件 选择QT-》QT Resource File 起个名,然后下一步…

降低Mobx技术债问题-React前端数据流方案调研整理

我们现在主要是使用Mobx,但是Mobx的易于上手和灵活度也带来了很多预期以外的问题,随着项目的增长我们的代码技术债变得愈加沉重,不同的模块杂糅一起、单一store无限膨胀。 为此我们的调研是希望能找到一个更好的state配置、数据流的约定方案。…