当前位置: 首页 > 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.lqws.cn/news/489421.html

相关文章:

  • 相机标定与3D重建技术通俗讲解
  • <tauri><threejs><rust><GUI>基于tauri和threejs,实现一个3D图形浏览程序
  • UE5 AnimMontage 的混合(Blend)模式
  • npm install时,遇到digital envelope routines::unsupported
  • BlazorWebView微软跨平台浏览器控件,UI组件
  • .NET多线程任务实现的几种方法及线程等待全面分析
  • Redis Stream 消息队列详解及 PHP 实现
  • 认识鸿蒙之了解应用结构
  • 关于华为Pura70Pro+升级鸿蒙NEXT和回退
  • 【Oracle篇】Windows平台单进程多线程架构设计与实现(比对Linux多进程架构)
  • 【Linux篇章】线程同步与互斥2:打破多线程并发困境,开启高效程序运行新境界
  • Gartner《Generative AI Use - Case Comparison for Legal Departments》
  • 【机器学习1】线性回归与逻辑回归
  • AI大模型之机器学习理论及实践:监督学习-机器学习的核心基石
  • 跟着AI学习C#之项目实践Day3
  • 【Linux网络编程】序列化与反序列化
  • 1个翠绿联网状态指示灯,闪烁未连接,常亮连接正常;软件如何实现
  • 浅析std::atomic<T>::compare_exchange_weak和std::atomic<T>::compare_exchange_strong
  • 【C++】C++中的虚函数和多态的定义与使用
  • AI 领航设计模式学习:飞算 JavaAI 解锁单例模式实践新路径
  • PROFIBUS DP转ETHERNET/IP在热电项目中的创新应用
  • WinUI3入门9:自制SplitPanel
  • Java基础(三):逻辑运算符详解
  • 提高WordPress网站加载速度和用户体验
  • C# SolidWorks二次开发-实战2,解决SolidWorks2024转step文件名乱码问题
  • 【25】木材表面缺陷数据集(有v5/v8模型)/YOLO木材表面缺陷检测
  • 【开源工具】一键解决使用代理后无法访问浏览器网页问题 - 基于PyQt5的智能代理开关工具开发全攻略
  • 干货分享 如何做好数据可视化?
  • Qt联合Halcon开发四:【详细图解】海康相机配置并链接测试
  • Zynq + FreeRTOS + YAFFS2 + SQLite3 集成指南