当前位置: 首页 > 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();});

相关文章:

  • 短期项目与长期目标如何同时兼顾
  • 华为云 Flexus+DeepSeek 征文|增值税发票智能提取小工具:基于大模型的自动化信息解析实践
  • 【面板数据】上市公司投资者保护指数(2010-2023年)
  • 【达梦数据库】忘记SYSDBA密码处理方法-已适配
  • 第十六届蓝桥杯C/C++程序设计研究生组国赛 国二
  • JavaScript中的10种排序算法:从入门到精通
  • 【源码+文档+调试讲解】基于web的运动健康小程序的设计与实现y196
  • VMware安装Ubuntu22.04详细教程
  • 基于协议转换的 PROFIBUS DP 与 ETHERNET/IP 在石化生产中的协同运行实践
  • Docker镜像制作
  • 从Java API调用者到架构思考:我的Elasticsearch认知升级之路
  • 【Linux篇章】线程同步与互斥2:打破多线程并发困境,开启高效程序运行新境界
  • libwebsockets编译
  • 【机器学习1】线性回归与逻辑回归
  • SQLite FTS4全文搜索实战指南:从入门到优化
  • Python Django全功能框架开发秘籍
  • 设计模式精讲 Day 11:享元模式(Flyweight Pattern)
  • 计算机操作系统(十六)进程同步
  • 笔试强训:Day8
  • PillarNet: Real-Time and High-PerformancePillar-based 3D Object Detection
  • 网站系统制作教程/网络营销网络推广
  • 辽宁网站备案/百度关键词价格排行榜
  • 宣讲家网站两学一做心得体会/seo课程简介
  • .net网站费用/网络推广有前途吗
  • 旅游便宜的网站建设/磁力珠
  • 漂亮的企业网站源码/seo博客优化