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.hqwc.cn/news/29388.html

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

相关文章

【MySQL】MySQL在Centos7环境下安装

目录 一、卸载不要的环境 1.1、查看是否有安装mysql 1.2、关闭运行的程序 1.3、卸载安装 二、配置yum 源 2.1、下载yum 源 2.2 安装yum源 2.3 查看是否已经生效 三、安装mysql服务 四、启动服务 五、登录方法 方法一&#xff08;不行就下一个&#xff09; 方法二&#xff08;不…

数据库应用:MySQL数据库SQL高级语句与操作

目录 一、理论 1.克隆表与清空表 2.SQL高级语句 3.SQL函数 4.SQL高级操作 5.MySQL中6种常见的约束 二、实验 1.克隆表与清空表 2.SQL高级语句 3.SQL函数 4.SQL高级操作 5.主键表和外键表 三、总结 一、理论 1.克隆表与清空表 克隆表&#xff1a;将数据表的数据记录…

英码积极参与行业交流活动,“快、易、省”赋能更多企业具备AI能力

2023年&#xff0c;ChatGPT的火爆引发了算力需求的大爆发&#xff0c;有人说&#xff0c;边缘计算因兼具时延低与安全等优势&#xff0c;或将成为解决AI算力紧张的良方&#xff1b;在人工智能产业发展的推动下&#xff0c;边缘计算成为了众人瞩目的焦点。随着应用场景的多元化和…

redis穿透问题

1.概述 一个热点数据在高并发情况下过期时间到了&#xff0c;会导致大量流量查询redis为null&#xff0c;进而请求数据库进行更新数据&#xff0c;从流量上来说请求打到了数据库上&#xff0c;这种情况可能会造成mysql服务崩溃。 2. 解决方式之一&#xff08;加锁解决之本地锁&…

【天工Godwork精品教程】天工3.1.7安装教程(附Godwork完整版下载地址)

本文讲解天工3.1.7安装过程(附Godwork完整版网盘下载地址)。 文章目录 一、天工3.1.7安装教程1. 安装GodWork-AT 3.1.72. 安装GodWork-AT 3.1.7补丁3. 安装GodWork-EOS-Setup-2017B-12314. 安装GodWork-EOS补丁5. 运行godwokr软件6. 生成ZC码7. 输入ZC码8. eos插件调用二、天…

Nginx代理Grafana,鉴权访问以及Grafan免登录访问

✨概述 在使用grafana做页面嵌入的场景中&#xff0c;通常需要grafana与前端在同域下&#xff0c;方便鉴权、解决跨域。 Nginx代理Grafana后&#xff0c;就不能使用Grafana中默认配置的端口和路径进行访问&#xff0c;必须通过Nginx访问Grafana。 如果需要做Iframe嵌入自研系…

Python、Selenium实现问卷星自动填写(内含适配个人问卷的方法)

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Py…

电子锁语音芯片方案,低功耗声音提示ic,WT588F02B-8S

随着科技的不断发展&#xff0c;电子锁已成为现代社会中&#xff0c;安全性和便利性并存的必备设备。如何为电子锁行业增添智能化、人性化的功能已成为行业内的热门话题。 在这个迅速发展的市场中&#xff0c;深圳唯创知音推出了一款语音交互方案——WT588F02B-8S 低功耗声音提…

C# 细说async/await的用法

目录 一&#xff0c;引言 二&#xff0c;实例演示 2.1 多线程同步执行下载任务&#xff0c;任务完成后通知 2.2 异步执行下载任务&#xff0c;任务完成后通知 三&#xff0c;async/await的用法 3.1 跨线程修改UI控件 3.2 异步获取数据 一&#xff0c;引言 首先先来区分…

基于html2canvas和jspdf将document DOM节点转换为图片生成PDF文件,并下载到本地

这里要用到html2canvas将document DOM节点转换为图片&#xff0c;并下载到本地_你挚爱的强哥的博客-CSDN博客前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件_你挚爱的强哥的博客-CSDN博客。会自动创建一个html文件。https://blog.csdn.net/qq_37860634/art…

解决 Qt 下载安装太慢的办法

Qt 现在新的版本都是采用在线安装&#xff0c;那速度实在是.... 找了一些方法&#xff0c;原理就是用 Fiddler 来代理&#xff0c;然后替换掉 url 成清华的镜像地址&#xff0c;这样就相当于直接从清华安装了&#xff0c;嘎嘎快 打开 Fiddler, 打开 Qt 安装程序&#xff0c;在…

安达发|某大厂使用APS计划排程真实成功案例

在很多群里、朋友圈、公众号上可以看到&#xff0c;很多精益咨询老师认为&#xff0c;不仅ERP不啥用&#xff0c;APS更是无聊之举&#xff0c;而且肯定是用不好的。但&#xff0c;事实上可能还真不是这样的。 一个深圳的客户&#xff0c;用了APS以后&#xff0c;不仅装配的齐套…