当前位置: 首页 > news >正文

uniapp+vue3做小程序,获取容器高度

小程序获能用createSelectorQuery,如果是子组件,后面可以额外加一个参数in来指定获取dom的范围。小程序里面可以直接.in(this),但是vue3没有this了,那就只能通过getCurrentInstance去获取当前实例代替this ,注意这里需要用解构的方法把proxy引进来

		<view class="image-container">内容</view>import { ref, reactive, onMounted, nextTick, watch, getCurrentInstance } from 'vue';// 获取容器尺寸const getContainerSize = () => {new Promise((resolve, reject) => {let view = uni.createSelectorQuery().in(proxy);view.select('.image-container').boundingClientRect((data) => {containerWidth.value = data.width;containerHeight.value = data.height;console.log(data);resolve(data);}).exec();}).then((res) => {});};/ 组件挂载后初始化onMounted(async () => {await nextTick();getContainerSize();});

http://www.lryc.cn/news/574212.html

相关文章:

  • 世赛背景下,高职物联网应用开发赛项实训解决方案
  • 2025年小程序地图打车的5大技术革新:实时路况预测与智能调度升级
  • 【Docker基础】Docker容器管理:docker pause详解
  • 【文件】Linux 内核优化实战 - fs.inotify.max_user_watches
  • 用DeepSeek完成实际生产编程完整项目
  • 树莓派超全系列教程文档--(66)rpicam-apps可用选项介绍之视频选项
  • [论文阅读] 人工智能 + 软件工程 | AI 驱动工具在软件质量保证中的革新:挑战与未来之路
  • 物联网的全球布局与未来趋势
  • 【Golang玩转MCP】-实现一个加减乘除MCP服务
  • 1 Studying《Systems.Performance》7-13
  • 数据赋能(313)——合作共享——跨界融合
  • Modbus TCP转Profibus DP网关与JF - 600MT称重变送器在STEP 7快速配置
  • 计算机操作系统(十六)进程同步
  • DMDRS部署实施手册(ORACLE=》DM)
  • Long类型返回给前端精度丢失问题(解决方案)
  • AWS S3服务器访问日志启用
  • RAG实战基础篇/windows电脑快速部署qwen3:14B
  • Python Arrow 库详解:更智能的日期时间处理
  • 制造业B端页面个性化设计案例:生产流程监控的专属布局打造
  • 探秘 Java 安全利器 ——JVMTI
  • 揭开 Git 裸仓库的神秘面纱:`git clone --mirror` 详解与使用指南
  • idea 报错:java: 非法字符: ‘\ufeff‘
  • Node.js特训专栏-实战进阶:7.Express模板引擎选型与使用
  • 大数据时代UI前端的变革:从静态展示到动态交互
  • 数字孪生:为UI前端设计带来沉浸式交互新体验
  • 【机器学习深度学习】偏置项(Bias)概念
  • 常用终端命令(Linux/macOS/bash 通用)分类速查表
  • Elasticsearch 如果保证读写一致
  • Milvus【工具 01】milvus_cli和可视化工具attu安装使用
  • 【Linux学习笔记】进程间通信之共享内存