uniapp动态获取列表中每个下标的高度赋值给另一个数组(完整代码附效果图)

uniapp实现动态获取列表中每个下标的高度,赋值给另一个数组。

先看效果图:

完整代码:

<template><div class=""><div class="">我是A列表,我的高度不是固定的</div><div class="p_r"><div style="background-color: antiquewhite;" :style="{height:item+'px'}" v-for="(item, index) in parmsList":key="index" :id="'idItem' + index">高度模拟为{{item}},</div></div><div class="">我是B列表, 我的高度是获取A列表的</div><div class="p_r"><div style="background-color: cadetblue;" v-if="heights" :style="{height:item}" v-for="(item, index) in heights":key="index">{{item}}</div></div></div>
</template><script>export default {data() {return {parmsList: [],heights: '',}},async created() {this.parmsList = [100, 200, 220, 240, 300];this.heights = []setTimeout(() => {this.heights=[]this.parmsList.forEach((item, index) => {this.setRTableHeight2(index)});}, 500)},methods: {setRTableHeight2(index) {const refName = 'idItem' + index;const query = uni.createSelectorQuery().in(this);query.select(`#${refName}`).boundingClientRect((data) => {console.log('节点的高度为' + data.height);let hhh = data.height + 'px'this.heights[index] = hhh}).exec();},}}
</script><style>.p_r {display: flex;direction: row;}
</style>

 

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

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

相关文章

300-700题红题第六题

336. 回文对 336. 回文对 **class Solution:def palindromePairs(self, words: List[str]) -> List[List[int]]:dic {w: i for i,w in enumerate(words)}res []for index, s in enumerate(words):for j in range(len(s)1):if s[j:] s[j:][::-1]: if s[:j][::-1] in dic…

MySQL 坐标批量计算及优化

文章目录 1、坐标计算2、优化 现在有一个需求&#xff0c;就是找出距离某用户最近的一些点&#xff0c;一种实现方法就是调用地图的api来计算筛选&#xff0c;另外一种就是在数据库中计算&#xff0c;考虑到地图api有并发量限制&#xff0c;所以选用数据库计算的方式。 1、坐标…

ThunderScope开源示波器

简介 4CH&#xff0c;1GSa/S 开源示波器。前端很简洁&#xff0c;BUF802LMH6518&#xff0c;ADC是HMCAD1511&#xff0c;用Xilinx A7 FPGA进行控制&#xff0c;数据通过PCIE总线传输到上位机处理。目前这个项目已经被挂到了Xilinx官网&#xff0c;强。 设计日志&#xff1a;h…

vue3 defineEmits的使用 和vue2对比

在Vue 3中&#xff0c;可以使用defineEmits来定义组件的自定义事件。defineEmits函数接受一个参数&#xff0c;该参数是一个数组或对象&#xff0c;用于指定需要定义的自定义事件。 使用数组定义自定义事件&#xff1a; import { defineComponent, defineEmits } from vue;co…

Unity自定义后处理——Vignette暗角

大家好&#xff0c;我是阿赵。   继续说一下屏幕后处理的做法&#xff0c;这一期讲的是Vignette暗角效果。 一、Vignette效果介绍 Vignette暗角的效果可以给画面提供一个氛围&#xff0c;或者模拟一些特殊的效果。 还是拿这个角色作为底图 添加了Vignette效果后&#xff0…

一篇全新视角的剖析:用Python编写的一组针对心电图数据的心跳检测算法的实现和探讨

一篇全新视角的深度剖析:用Python编写的一组针对心电图数据的心跳检测算法的实现和探讨 在医学领域,心电图(Electrocardiogram,ECG)是一种常见且重要的检查手段,主要用于了解心脏的电活动。通过心电图数据,我们可以掌握心脏的工作状况,例如心跳是否规律、心室和心房是…

模板模式(上):剖析模板模式在JDK、Servlet、JUnit等中的应用

今天&#xff0c;我们再学习另外一种行为型设计模式&#xff0c;模板模式。我们多次强调&#xff0c;绝大部分设计模式的原理和实现&#xff0c;都非常简单&#xff0c;难的是掌握应用场景&#xff0c;搞清楚能解决什么问题。模板模式也不例外。模板模式主要是用来解决复用和扩…

软件测试银行项目面试过程

今天参加了一场比较正式的面试&#xff0c;汇丰银行的视频面试。在这里把面试的流程记录一下&#xff0c;结果还不确定&#xff0c;但是面试也是自我学习和成长的过程&#xff0c;所以记录下来大家也可以互相探讨一下。 请你做一下自我介绍&#xff1f;&#xff08;汇丰要求英…

第108天:免杀对抗-Python混淆算法反序列化打包生成器Py2exeNuitka

知识点 #知识点&#xff1a; 1、Python-对执行代码做文章 2、Python-对shellcode做文章 3、Python-对代码打包器做文章#章节点&#xff1a; 编译代码面-ShellCode-混淆 编译代码面-编辑执行器-编写 编译代码面-分离加载器-编写 程序文件面-特征码定位-修改 程序文件面-加壳花指…

webpack打包之 copy-webpack-plugin

copy-webpack-plugin 打包复制文件插件。 1、什么时候要使用&#xff1f; 在离线应用中&#xff0c;前端所有文件都需在在本地&#xff0c;有些文件&#xff08;比如iconFont以及一些静态img)需要转为离线文件&#xff0c;这些文件可以直接引用更方便些&#xff0c;这就需要在打…

6.6Jmeter远程调度Linux机器Jmeter测试

1、配置Agent和启动 1.1、打开jmeter/bin目录下的jmeter.properties 1、server_port1099取消注释 2、remote_hosts127.0.0.1 改为remote_hosts127.0.0.1:1099 或者是remote_hostsAgent机的ip:1099 3、server.rmi.localport1099 4、server.rmi.ssl.disablefalse改为true&#x…

matlab 一维数组拼接,多个一维数组合并成一个一维数组

目录 matlab 一维数组拼接,多个一维数组合并成一个一维数组 1、一维数组直接合并 直接将两个矩阵合并&#xff1a; 2、一维数组交叉合并&#xff1a; 方法一&#xff1a; 方法二&#xff1a; 方法三&#xff1a; 方法四&#xff1a; 其他操作&#xff1a; matlab 一维…

店招新品之创意LED显示屏之LED魔方屏的特点

LED魔方屏也被称之为立方体LED显示屏、六面体LED显示屏等&#xff0c;每个显示面之间实现了无缝拼接&#xff0c;运用技术前沿的箱体设计工艺&#xff0c;通过跟实际安装场景相结合&#xff0c;打造出更具创意的LED显示屏产品&#xff0c;LED魔方屏以独特的造型吸引用户&#x…

OceanBase 4.1上云,OB Cloud助力企业降本增效

近日&#xff0c;OB Cloud 正式上线 OceanBase 4.1 新版本&#xff0c;支持企业在云上使用最新的 OceanBase 单机分布式一体化架构能力。去年8月OceanBase 宣布公有云服务全球开服&#xff0c;伴随4.1版本推出&#xff0c;OceanBase公有云正式命名为OB Cloud云数据库。 在本次…

基于springboot+Redis的前后端分离项目之分布式锁(四)-【黑马点评】

&#x1f381;&#x1f381;资源文件分享 链接&#xff1a;https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA?pwdeh11 提取码&#xff1a;eh11 分布式锁 分布式锁1 、基本原理和实现方式对比2 、Redis分布式锁的实现核心思路3 、实现分布式锁版本一4 、Redis分布式锁误删情况…

Ubuntu 22.04 配置 QGIS二次开发环境

源码地址&#xff0c;以及官方指导文档地址 源码地址&#xff1a;https://github.com/qgis/QGIS/releases QGIS 官方指导文档地址&#xff1a;https://github.com/qgis/QGIS/blob/release-3_26/INSTALL.md&#xff08;此处为3.26的指导文档&#xff0c;可以自行修改查看&#…

基于SpringBoot+Vue+微信小程序的电影平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 研究背景&#xff1a;…

Hyperledger Fabric测试网络的准备和基本使用

文章目录 相关安装启动测试网络创建channel打包链码安装链码包通过链码定义链码定义提交给通道调用链码关闭网络遇到的问题1.docker保持启动状态2.忘起测试网络了3.Java版本过高&#xff0c;推荐1.8 相关安装 npm、node、git、docker、docker-compose。docker保证一直运行 serv…

基于springboot的微信小程序宠物领养医院系统(源代码+数据库+10000字论文)085

基于springboot的微信小程序宠物领养医院系统(源代码数据库10000字论文)085 一、系统介绍 本项目有网页版和小程序端 本系统分为管理员、医生、用户三种角色 用户角色包含以下功能&#xff1a; 登录、注册、宠物领养、医生在线咨询、查看挂号、个人中心、密码修改、宠物寄…

【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup,其中包含图片和名称

在微信小程序中&#xff0c;你可以使用weui组件库来实现弹出一个确认的popup&#xff0c;并在其中包含图片和名称。以下是一个示例代码&#xff1a; 在wxml文件中&#xff0c;添加一个按钮来触发弹出确认popup&#xff1a; <button bindtap"showPopup">显示确…