uniapp 获取自定义组件的高度

在 UniApp 中,要获取自定义组件的高度,可以使用uni.createSelectorQuery()方法结合res.noderes.height来实现。

首先,在父组件的代码中,给自定义组件添加一个 ref 属性,例如:

<template><view><tab-bars ref="tabBars" :choose_index="2"></tab-bars></view>
</template>

然后,在父组件的 mounted 钩子函数中,使用 uni.createSelectorQuery() 来获取自定义组件的高度,如下所示:

<script>
export default {mounted() {this.$nextTick(() => {uni.createSelectorQuery().in(this.$refs.tabBars).select('.tab-bars').boundingClientRect((res) => {console.log('自定义组件的高度:', res.height);}).exec();});},
};
</script>

上述代码中,uni.createSelectorQuery() 用于创建查询对象,in(this.$refs.tabBars) 用于指定查询的节点为自定义组件(通过ref属性获取),.select('.tab-bars') 用于选择自定义组件的类名为 .tab-bars 的节点,.boundingClientRect() 用于获取该节点的位置和尺寸信息。最后,通过 .exec() 执行查询操作,并在回调函数中获取自定义组件的高度。

***请确保 .tab-bars 是自定义组件的类名,根据实际情况进行调整。***

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

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

相关文章

VS C#类文件自动生成头部注释

VS C#类文件自动生成头部注释&#xff08;以VS2019为例&#xff09; 1、更新位置 E:\VS2019\vs_2019\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 2、替换Class 原始文件 using System; using System.Collections.Generic; $if$ ($targetframeworkversion$ > 3.5…

【代码随想录】【算法训练营】【第58天 3】 [卡码103]水流问题 [卡码104]建造最大岛屿

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 58&#xff0c;周四&#xff0c;ding~ 题目详情 [卡码103] 水流问题 题目描述 卡码103 水流问题 LeetCode类似题目417 太平洋大西洋水流问题 解题思路 前提&#xff1a; 思路&#xff1a; 重…

Qt 制作安装包

记录使用Qt工具制作一个安装包的过程 目录 1.准备工作 1.1检查Qt Installer Frameworks是否安装 1.2.安装Qt Installer Frameworks 1.3准备release出来的exe dll等文件 2.创建打包工程所需要的文件及目录 2.1创建子目录 2.2 创建工程文件 2.3 创建config/config.xml …

数据结构第35节 性能优化 算法的选择

算法的选择对于优化程序性能至关重要。不同的算法在时间复杂度、空间复杂度以及适用场景上有着明显的差异。下面我将结合具体的代码示例&#xff0c;来讲解几种常见的算法选择及其优化方法。 示例 1: 排序算法 场景描述: 假设我们需要对一个整数数组进行排序。 算法选择: …

创建鸿蒙手机模拟器(HarmonyOS Emulator)

文 | Promise Sun 一.前提条件&#xff1a; 鸿蒙项目开发需要使用模拟器进行开发测试&#xff0c;但目前想在DevEco Studio开发工具中使用模拟器就必须到华为官网进行报名申请&#xff0c;参加“鸿蒙模拟器&#xff08;HarmonyOS Emulator&#xff09;Beta活动申请”。 申请审…

好用的Ubuntu下的工具合集[持续增加]

1. 终端工具 UBUNTU下有哪些好用的终端软件? - 知乎 (zhihu.com) sudo apt install terminator

计算机课设——基于Java web的超市管理系统

smbms_java_web 基于Java web的超市管理系统&#xff0c;数据库课程设计 1.引言 是一个基于Java Web连接MySQL的小项目。 超市管理系统(smbms)作为每个计算机专业的大学生都是一个很好的练手项目&#xff0c;逻辑层次分明&#xff0c;基础功能包括用户的登录和注销&#xff…

【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等

文章目录 1. 代码基本结构2. 导出的excel 某单元格的值设置为下拉选择3. 如何把下拉选择项设置为动态4. 单元格设置校验、提示5. 在WPS上的设置 1. 代码基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…

韦东山嵌入式linux系列-驱动进化之路:设备树的引入及简明教程

1 设备树的引入与作用 以 LED 驱动为例&#xff0c;如果你要更换LED所用的GPIO引脚&#xff0c;需要修改驱动程序源码、重新编译驱动、重新加载驱动。 在内核中&#xff0c;使用同一个芯片的板子&#xff0c;它们所用的外设资源不一样&#xff0c;比如A板用 GPIO A&#xff0c…

SpringBoot集成EasyExcel实现模板写入多个sheet导出

EasyExcel使用模板导出多个sheet 开发环境 开发环境 SpringBoot2.6EasyExcel3.2.1 //第一种输出到指定目录 public static void main(String[] args) throws FileNotFoundException {InputStream inputStream new FileInputStream(new File("模板位置"));InputStre…

ES6 模块

ES6 模块学习记录 ES6&#xff08;ECMAScript 2015&#xff09;模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码&#xff0c;模块可以在不同的文件之间进行组织和重用。 基本特征 默认导出&#xff08;Default Exports&#xff09;&#xff1a;每个…

PHP MySQL 读取数据

PHP MySQL 读取数据 PHP和MySQL是Web开发中的经典组合&#xff0c;广泛用于创建动态网站和应用程序。在PHP中读取MySQL数据库中的数据是一项基本技能&#xff0c;涉及到连接数据库、执行查询以及处理结果集。本文将详细介绍如何使用PHP从MySQL数据库中读取数据。 1. 环境准备…

基于python的京东VR眼镜口碑情感分析,包括lda和情感分析

第1章 绪论 1.1选题背景 在当今科技发展迅速的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;技术作为一种前沿的数字体验方式受到越来越多人的关注。京东作为中国领先的电商平台&#xff0c;推出的VR眼镜备受消费者关注。通过对京东VR眼镜口碑进行情感分析&#xff0c…

Pycharm 报错 Environment location directory is not empty 解

删除项目中ven文件夹&#xff08;已存在的&#xff09;&#xff0c;然后再添加新的ven虚拟环境就可以了

如何用手机压缩视频?手机压缩视频方法来了

高清视频的大文件大小常常成为分享和存储的障碍&#xff0c;尤其是在数据流量有限或存储空间紧张的情况下。幸运的是&#xff0c;无论是智能手机还是个人电脑&#xff0c;都有多种方法可以帮助我们轻松压缩视频文件&#xff0c;以适应不同的需求和情境。本文将介绍如何在手机上…

R语言学习笔记9-数据过滤-分组-融合

R语言学习笔记9-数据过滤-分组-融合 数据过滤基础数据过滤条件筛选数据使用dplyr包进行数据操作select 函数filter 函数subset函数 数据分组使用split()进行数据分组使用dplyr包进行数据分组使用data.table包进行数据分组 数据融合使用merge()进行数据融合使用dplyr包进行数据融…

格式工厂转换视频分辨率

1、下载和安装 http://www.pcfreetime.com/formatfactory/CN/index.html 2、打开视频 3、设置分辨率等参数 也可以选择保持原分辨率 4、执行导出 5、打开输出所在位置

CCF-CSP认证考试 202406-2 矩阵重塑(其二) 100分题解

更多 CSP 认证考试题目题解可以前往&#xff1a;CSP-CCF 认证考试真题题解 原题链接&#xff1a; 202406-2 矩阵重塑&#xff08;其二&#xff09; 时间限制&#xff1a; 1.0 秒 空间限制&#xff1a; 512 MiB 题目背景 矩阵转置操作是将矩阵的行和列交换的过程。在转置过程…

前端开发之盒子模型

目录 盒子分类 display属性 盒子内部结构特征 padding填充区 border边框区 margin外边距 盒子width和height边界 盒子分类 块级盒子&#xff08;又叫块级元素、块级标签&#xff09; 特征&#xff1a;独占一行&#xff0c;对宽度高度支持 如&#xff1a;p div ul li h1…

完整且详细的Yolov8复现+训练自己的数据集

Yolov8 的源代码下载&#xff1a;ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > CoreML > TFLite (github.com)https://github.com/ultralytics/ultralytics Yolov8的权重下载&#xff1a;Releases ultralytics/assets GitHubUltralyt…