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>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker使用总结

Docker 1.什么是 Docker 官网的介绍是“Docker is the world’s leading software container platform.” 官方给Docker的定位是一个应用容器平台。 Docker 是一个容器平台的领导者 Docker 容器平台 Docker 应用容器平台 application项目 Mysql Redis MongoDB ElasticSeacrh …

我国版式文档格式OFD前端WEB展示之EasyOFD

EasyOFD an ofd file web shower 一个在web端展示ofd文件的控件&#xff0c;该控件基于CANVAS绘制。 该控件使用了以下外部程序 1&#xff09;jszip&#xff1a;解决解压文件。 2&#xff09;x2js: 解决XML文件到JS转换 3&#xff09;easyjbig2: 解决ofd内部使用jb2文件存储的…

java项目之足球赛会管理系统(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的足球赛会管理系统。技术交流和部署相关看文章末尾&#xff01; 项目地址&#xff1a; https://download.csdn.net/download/sinat_26552841…

什么是渲染?一文看懂,萌新赶紧收藏码住!

十四五规划提出“加快数字化发展&#xff0c;建设数字中国”&#xff0c;数字技术的快速发展&#xff0c;从起初的内容创建到最终的效果呈现&#xff0c;都离不开渲染技术。目前&#xff0c;渲染技术被广泛应用于教育、医疗、影视动画、建筑设计等多个领域。它能有效满足用户对…

docker基础1——架构组成、安装配置

文章目录 一、发展起源1.1 传统虚拟化与容器虚拟化1.2 docker底层核心技术1.2.1 命名空间1.2.2 控制组 1.3 docker工作方式1.4 docker容器编排1.5 docker优劣势1.6 docker架构组成 二、yum安装docker三、配置docker加速器 一、发展起源 背景了解&#xff1a; 容器是内核里的一项…

【Python】PyCharm中调用另一个文件的函数或类

&#x1f389;欢迎来到Python专栏~PyCharm中调用另一个文件的函数或类 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&…

Langchain-ChatGLM配置文件参数测试

1 已知可能影响对话效果的参数&#xff08;位于configs/model_config.py文件&#xff09;&#xff1a; # 文本分句长度 SENTENCE_SIZE 100# 匹配后单段上下文长度 CHUNK_SIZE 250 # 传入LLM的历史记录长度 LLM_HISTORY_LEN 3 # 知识库检索时返回的匹配内容条数 VECTO…

leetcode 9 回文数

class Solution {public boolean isPalindrome(int x) {if(x < 0){return false;}int num x;int value 0;while(num > 0){value value * 10 num % 10;num num / 10;}return value x;} }

golang 日志库logrus和lumberjack 日志切割库实践

package mainimport (log "github.com/Sirupsen/logrus""gopkg.in/natefinch/lumberjack.v2" )func main() {logger : &lumberjack.Logger{// 日志输出文件路径Filename: "/var/log/myapp/foo.log",// 日志文件最大 size, 单位是 MBMaxSiz…

【问题解决】VSCode 远程安装插件特别慢

【问题描述】 我要配置 VSCode WSL 的开发环境&#xff0c;需要在 WSL 里也装上 C、CMake 系列的插件&#xff0c;如下图的直接下载方式特别慢&#xff1a; 【解决方法】 先去网站下载插件&#xff1a;https://marketplace.visualstudio.com/&#xff0c;后缀名&#xff1a;…

re学习(18)[ACTF新生赛2020]rome1(Z3库+window远程调试)

参考视频: Jamiexu793的个人空间-Jamiexu793个人主页-哔哩哔哩视频 代码分析&#xff1a; 其主要内容在两个while循环中&#xff08;从定义中可知flag位16个字符&#xff09;。 看第二个循环&#xff0c;可知是比较result和经过第一个循环得到的v1比较&#xff08;就是flag…

Django MultiValueDictKeyError 表单数据用request.POST 非表单数据用request.body

表单数据&#xff1a;Content-Type(请求头)为application/x-www-form-urlencoded的数据。 用request.POST获取 a request.POST.get(a) a request.POST[a] alist request.POST.getlist(a) 非表单数据&#xff1a;Content-Type(请求头)为非application/x-www-form-urlenco…

Ghost Buster Pro for mac(快速清理卸载的应用残存文件)

Ghost Buster Pro for mac可从您已卸载的应用程序中查找并删除文件。该应用程序速度快如闪电&#xff0c;可立即释放内存。 许多应用程序都安装在计算机上&#xff0c;但它们通常只会在您的计算机上停留很短的时间。每个应用程序都会创建文件&#xff0c;但删除应用程序不会删…

create database创建数据库失败

瀚高数据库 目录 环境 症状 问题原因 解决方案 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5.7 症状 1、执行如下sql语句创建数据库报错。 create database printcdburn with encodingUTF8 OWNERprintcdburn LC_COLLATEzh_CN.UTF-…

第八十八回:创建一个调色板

文章目录 概念介绍实现方法整体思路具体步骤 示例代码 我们在上一章回中介绍了打印日志相关的内容&#xff0c;本章回中将介绍 如何创建一个调色板.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的调色板是一个具有各种颜色的窗口&#xff0c…

Taurus .Net Core 微服务开源框架:Admin 插件【4-3】 - 配置管理-Mvc【Plugin-MicroService 微服务】

目录 1、系统配置节点&#xff1a;Mvc - Plugin - MicroService 配置界面&#xff1a;注册中心 2、系统配置节点&#xff1a;Mvc - Plugin - MicroService 配置界面&#xff1a;注册中心&#xff08;从&#xff09; 3、系统配置节点&#xff1a;Mvc - Plugin - MicroService…

【C语言初阶(18)】结构体

文章目录 前言Ⅰ结构体的声明Ⅱ 结构体的定义Ⅲ 结构体初始化Ⅳ 访问结构体成员⒈结构体变量访问结构体成员⒉结构体指针访问结构体成员 Ⅴ 结构体的嵌套Ⅵ 结构体传参 前言 C 语言提供了一些非常基本的数据类型&#xff0c;如 int、float、double、char 等&#xff0c;这些不同…

基于R语言的水文、水环境模型优化技术及快速率定方法与多模型案例实践

目录 专题一、最速上升法、岭分析以及响应曲面模型 专题二、Kriging插值与优化方法 专题三、启发式算法 专题四、采样方法 专题五、高斯过程回归 专题六、基于模型的高斯过程/贝叶斯优化设计 专题七、最优化的快速化 专题八、高级高斯过程模型 专题九、异方差性 专题…

动手学深度学习——图像分类数据集(代码详解)

目录 1. 图像分类数据集1.1 读取数据集1.2 读取小批量1.3 整合所有组件1.4 小结 1. 图像分类数据集 这里采用Fashion-MNIST数据集 torchvision&#xff1a;torch类型的可视化包&#xff0c;一般计算机视觉和数据可视化需要使用from torchvision import transforms&#xff1a;…

基于单片机的智能台灯 灯光控制系统人体感应楼梯灯系统的设计与实现

功能介绍 以STM32单片机作为主控系统&#xff1b;主通过光敏采集当前光线强度&#xff1b;通过PMW灯光调节电路&#xff0c;我们可以根据不同的光线亮度&#xff0c;进行3挡调节&#xff1b;通过人体红外检测当前是否有人&#xff1b;通过不同光线情况下使用PWM脉冲电路进行调节…