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 { proxy } = getCurrentInstance();
// 獲取容器尺寸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.pswp.cn/news/910524.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/910524.shtml
英文地址,請注明出處:http://en.pswp.cn/news/910524.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【網工】華為配置專題進階篇①

目錄 ■浮動路由和BFD配置 ▲浮動路由 基本配置示例 ▲BFD ▲驗證命令 ▲測試連通性 ■路由綜合實驗RIP OSPF BGP ■浮動路由和BFD配置 ▲浮動路由 浮動路由&#xff1a;設置preference 浮動路由是一種備份路由機制&#xff0c;當主路由失效時&#xff0c;浮動路由會…

DeepLegal AI:智能法律文檔審查與合規助手+MVP

1. 商業價值與市場機會 DeepLegal AI旨在革新法律行業中耗時且資源密集型的文檔審查和合規流程。該應用將利用DeepSeek先進的語言模型能力&#xff0c;為律師事務所、企業法務部門和合規團隊提供一個高效、準確且經濟的解決方案。 市場機會&#xff1a; 法律科技市場正經歷爆…

使用 Rust 編寫簡單計算器

在編程語言的世界中&#xff0c;Rust 以其安全性和高性能而聞名。今天&#xff0c;我們將通過一個簡單的項目來探索 Rust 的魅力 —— 編寫一個簡單的命令行計算器。這個計算器將支持基本的算術運算&#xff08;加、減、乘、除&#xff09;&#xff0c;并且可以通過用戶輸入進行…

清華大學:《AI賦能教育 :高考志愿填報工具使用指南》下載

志愿填報的認知革命已經到來 “分數出來了&#xff0c;但不知道能上什么學校……” “喜歡這個專業&#xff0c;但不知道就業前景怎么樣&#xff1f;” “到底是選熱門專業還是選興趣愛好&#xff1f;” 這些讓百萬家庭徹夜難眠的問題&#xff0c;你是否正在經歷&#xff1f; …

【科技公司的管理】

如何打造高效、人性化的目標驅動型公司&#xff1f;——OKR管理法績效薪酬體系全指南 你希望公司目標清晰、員工高效、多勞多得&#xff0c;同時避免馬斯克式的“冷血管理”&#xff0c;兼顧員工生活需求。以下是系統性解決方案&#xff0c;涵蓋目標設定&#xff08;OKR&#x…

小白成長之路--nginx基礎配置(一)

文章目錄 一、概述1.1 Nginx 特點1.2 Nginx 作用1.3Nginx工作原理 二、Nginx服務搭建2.1安裝2.2 目錄結構2.3 配置文件作用2.4 nginx,conf配置文件詳解2.5 核心命令2.6 Nginx信號三.Nginx3.1啟動 總結 一、概述 Nginx 是開源、高性能、高可靠的 Web服務器 和反向代理服務器&am…

從最基礎的float布局開始學前端

前端學習其實不難&#xff0c;我們先從float布局講起&#xff0c;寫一個最簡單的導航欄&#xff1a;Logo在左&#xff0c;導航鏈接在右。下面是示例代碼&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"…

12. TypeScript 高級類型

TypeScript 中的高級類型包括映射類型、條件類型、字面量類型和遞歸類型等強大結構。這些特性使開發者能夠表達類型之間更復雜的關系&#xff0c;從而處理邊緣情況&#xff0c;并定義更動態、更靈活的類型系統。 一、映射類型 TypeScript 映射類型&#xff08;Mapped Types&a…

韓國證券交易所(KRX)全生態接入系統技術白皮書

核心價值&#xff1a;為全球最活躍的衍生品市場&#xff08;日均交易量480億美元&#xff09;提供 5μs延遲引擎全合規認證&#xff0c;助力中資機構搶占韓國78%衍生品交易份額 一、KRX市場機遇與準入壁壘 1.1 核心數據錨定&#xff08;2025Q2&#xff09; 指標數值全球競爭力…

【Clickhouse系列】增刪改查:對比mysql

目錄 1. 寫入操作 (INSERT) 2. 刪除操作 (DELETE) 3. 更新操作 (UPDATE) 4. 查詢操作 (SELECT) 5. 總結對比表&#xff1a; 6. 參考鏈接 核心哲學差異&#xff1a; MySQL&#xff1a; 面向在線事務處理。核心目標是保證數據的強一致性、原子性和低延遲的單行操作&#x…

低壓電工作業中,如何正確選用熔斷器的額定電流?

在低壓電工作業中&#xff0c;正確選用熔斷器額定電流需綜合考慮負載類型、額定電流等因素&#xff0c;具體方法如下&#xff1a; 照明電路&#xff1a;對于白熾燈負載&#xff0c;熔體額定電流可按被保護電路上所有白熾燈工作電流之和的 1.1 倍選取。若是日光燈和高壓水銀熒…

MySQL:索引優化實戰技巧

目錄 一、前言 二、基礎知識回顧 三、索引設計優化 1.遵循最左匹配原則&#xff0c;合理設計聯合索引順序 2.利用覆蓋索引避免回表查詢 3.針對字符串列使用前綴索引 4.合理使用復合索引替代多個單列索引 5.使用前綴索引優化模糊查詢的左匹配 四、索引使用優化 1.避免在…

開關電源計算輔助軟件SMPSKIT V10.3

資料下載地址&#xff1a;開關電源計算輔助軟件SMPSKIT V10.3 SMPSKIT &#xff1a; 內置一些常見IC的計算 內置絕大多數磁芯數據 內置變壓器分層計算器 可用戶編程功能 包含絕大多數拓…

OpenHarmony應用開發-全量包的使用

文章目錄 一、下載full-sdk二、替換本地對應版本的SDK1.查看本地SDK安裝目錄2.替換對應的SDK版本 三、升級APL權限為系統權限&#xff08;升級后便可使用系統接口&#xff09;四、重啟IDE并重新進行應用簽名總結 一、下載full-sdk 可以在官方提供的“每日構建”中搜索對應版本…

sudo安裝pip包的影響

使用 sudo 安裝的 pip 包和不使用 sudo 安裝的 pip 包在 Ubuntu 20.04 上有以下幾個主要區別&#xff1a; 1. 安裝位置&#xff1a; 使用 sudo: 包會被安裝到系統級別的 Python 環境中&#xff0c;通常是 /usr/local/lib/python3.8/dist-packages/ 或 /usr/lib/python3/dist-…

uniapp 多圖上傳,加水印功能(全平臺通用)

多圖上傳和水印都是比較難得&#xff0c;特別是有的api只支持在小程序用&#xff0c;h5不給用 效果圖 普通的多圖上傳 // 多圖上傳 // count&#xff1a;最大數量 export function headerUploads0(count 9, orderNumber , watermarkInfo) {return new Promise((resolve, r…

【appium】5. Appium WebDriver 支持的常用方法匯總

下面是一個完整的 Appium WebDriver 支持的常用方法匯總&#xff0c;并附上典型用法示例。 一、元素查找方法/元素操作方法 ? 使用 find_element() 和 find_elements() from appium import webdriver from appium.webdriver.common.appiumby import AppiumBy# 單個元素查找 …

FreeRTOS 介紹、使用方法及應用場景

一、FreeRTOS 概述 FreeRTOS 是一款廣泛應用于嵌入式系統的實時操作系統&#xff08;RTOS&#xff09;&#xff0c;具有開源、可移植、可裁剪、輕量級等顯著特點。它最初由 Richard Barry 開發&#xff0c;如今已成為全球開發者在物聯網、工業控制、消費電子等領域的熱門選擇&a…

深度解析 Caffeine:高性能 Java 緩存庫

1. Caffeine 簡介 Caffeine 是一個基于 Java 8 的高性能本地緩存庫&#xff0c;由 Ben Manes 開發&#xff0c;旨在替代 Google Guava Cache&#xff0c;提供更優的緩存策略、更高的吞吐量和更靈活的配置。 核心優勢 ? 卓越的性能&#xff1a;采用優化的數據結構&#xff0…

創客匠人賦能創始人 IP 打造:健康行業知識變現案例深度解析

在知識服務行業蓬勃發展的當下&#xff0c;創始人 IP 打造已成為知識變現的核心驅動力。創客匠人近期披露的陪跑案例顯示&#xff0c;通過系統化的線上線下聯動運營&#xff0c;傳統行業從業者可高效實現 IP 價值轉化。以亓黃中醫科技創始人吳豐言老師為例&#xff0c;其在創客…