uniapp获取内容高度

devtools/2024/12/24 3:57:35/

获取内容高度

javascript">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 变化的更精准方案,适合动态列表渲染的场景

javascript">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.ppmy.cn/devtools/144886.html

相关文章

vue项目两种路由模式原理和应用

两种模式的区别 路由,让页面url改变,但整个html页面不重新加载,单页面应用,局部刷新页面。 1. hash原理 通过动态锚点技术重写url,如“http://127.0.0.1/#/XXX”,改变#后面的路径,实现切换url…

【设计模式探索——智能遍历:如何用迭代器模式优化AI数据处理】

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” 文章目录 迭代器含义迭代器模式的优点迭代器的核心思想 世上本没有迭代器,不爽的人多了&#xff…

调用钉钉接口发送消息

调用钉钉接口发送消息 通过创建钉钉开放平台创建H5小程序,通过该小程序可以实现向企业内的钉钉用户发送消息(消息是以工作通知的形式发送) 1、目前仅支持发送文本消息,相同内容的文本只能成功发送一次,但是接口返回发…

一起学Git【第一节:Git的安装】

Git是什么? Git是什么?相信大家点击进来已经有了初步的认识,这里就简单的进行介绍。 Git是一个开源的分布式版本控制系统,由Linus Torvalds创建,用于有效、高速地处理从小到大的项目版本管理。Git是目前世界上最流行…

王佩丰24节Excel学习笔记——第十六讲:简单文本函数

【以 Excel2010 系列学习,用 Office LTSC 专业增强版 2021 实践】 【本章小技巧】 如果已知要取数据的固定起始位,可使用此小技巧,如:MID(A3,4,100),知道从第4位取,后面不知道有多少,我就多取&…

springmvc的拦截器,全局异常处理和文件上传

拦截器: 拦截不符合规则的,放行符合规则的。 等价于过滤器。 拦截器只拦截controller层API接口。 如何定义拦截器。 定义一个类并实现拦截器接口 public class MyInterceptor implements HandlerInterceptor {public boolean preHandle(HttpServletRequest reque…

实现路由懒加载的方式有哪些?

1函数式懒加载 使用vue的异步组件和webpack的代码分割功能,通过()>import()这种函数形式来定义路由组件,示例如下: const Home () > import(/views/Home.vue); const router new VueRouter({routes: [{ path…

RFdiffusion get_torsions函数解读

函数功能 get_torsions 函数根据输入的原子坐标(xyz_in)和氨基酸序列(seq),计算一组主链和侧链的扭转角(torsions)。同时生成备用扭转角(torsions_alt),用于表示可以镜像翻转的几何结构,并返回掩码(tors_mask)和是否平面化(tors_planar)的信息。 输入参数 xyz…