uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高
獲取到屏幕的寬度和高度，可以根據(jù)需要將這些值用于布局、樣式或其他操作。
一、獲取屏幕寬高
1.uniapp
使用uni.getSystemInfo()方法來(lái)獲取系統(tǒng)信息，包括屏幕的寬度和高度。（注意：uni.getSystemInfo()方法是一個(gè)異步方法，因此你需要在success回調(diào)函數(shù)中處理獲取到的屏幕尺寸數(shù)據(jù)。）
methods: {
getScreenSize() {
uni.getSystemInfo({
success: (res) => {
const screenWidth = res.windowWidth; // 屏幕寬度，單位為px
const screenHeight = res.windowHeight; // 屏幕高度，單位為px
console.log('屏幕寬度：', screenWidth);
console.log('屏幕高度：', screenHeight);
},
});
},
},
在需要獲取屏幕寬度和高度的地方，調(diào)用getScreenSize()方法即可。
mounted() {
this.getScreenSize(); // 在組件或頁(yè)面加載完成后調(diào)用獲取屏幕尺寸的方法
},
2.vue
使用window.innerWidth和window.innerHeight獲取屏幕的寬高：
const screenWidth = window.innerWidth; // 屏幕寬度 const screenHeight = window.innerHeight; // 屏幕高度
二、獲取盒子內(nèi)容寬高
1.uniap
使用uni.createSelectorQuery()方法來(lái)創(chuàng)建一個(gè)選擇器查詢對(duì)象，來(lái)獲取盒子內(nèi)容撐起的寬度和高度。（注意：uni.createSelectorQuery()方法是一個(gè)異步方法，因此你需要在boundingClientRect回調(diào)函數(shù)中處理獲取到的盒子尺寸數(shù)據(jù)。）
methods: {
getBoxSize() {
uni.createSelectorQuery()
.select('.box') // 選擇你要獲取尺寸的盒子元素，這里假設(shè)盒子元素的class為box
.boundingClientRect((rect) => {
const boxWidth = rect.width; // 盒子的寬度，單位為px
const boxHeight = rect.height; // 盒子的高度，單位為px
console.log('盒子寬度：', boxWidth);
console.log('盒子高度：', boxHeight);
})
.exec();
},
},
在需要獲取盒子寬度和高度的地方，調(diào)用getBoxSize()方法即可。
mounted() {
this.getBoxSize(); // 在組件或頁(yè)面加載完成后調(diào)用獲取盒子尺寸的方法
},
2.vue
在Vue組件中，通過(guò)this.$refs訪問(wèn)ref屬性，并使用$el獲取盒子元素的寬高：
<div ref="box" class="box"></div> const boxWidth = this.$refs.box.$el.offsetWidth; // 盒子寬度 const boxHeight = this.$refs.box.$el.offsetHeight; // 盒子高度 console.log(boxWidth,boxHeight);
總結(jié)
到此這篇關(guān)于uniapp和vue如何獲取屏幕或盒子內(nèi)容寬高的文章就介紹到這了,更多相關(guān)uniapp和vue獲取屏幕內(nèi)容寬高內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Vue3內(nèi)置組件Teleport使用方法，Teleport是Vue 3.0 新增的一個(gè)內(nèi)置組件，主要是為了解決一些特殊場(chǎng)景下模態(tài)對(duì)話框組件、組件的渲染，帶著些許的了解一起走進(jìn)下面文章的詳細(xì)內(nèi)容吧2021-10-10
這篇文章主要介紹了vue中可以綁定多個(gè)事件嗎，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了vue保存自動(dòng)格式化換行，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
深入了解vue-router原理并實(shí)現(xiàn)一個(gè)小demo
這篇文章主要為大家詳細(xì)介紹了vue-router原理并實(shí)現(xiàn)一個(gè)小demo，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開(kāi)發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了一個(gè)基于vue3+ts+vite項(xiàng)目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時(shí)才重新計(jì)算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動(dòng)更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計(jì)算屬性具有緩存性,而方法每次調(diào)用都會(huì)執(zhí)行,使用computed可以使模板更加簡(jiǎn)潔,提高應(yīng)用性能2024-09-09
Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)
當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候,懶加載可以分割代碼塊,提高頁(yè)面的初始加載效率解決白屏問(wèn)題,下面是幾種常見(jiàn)vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧2023-11-11
Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法
這篇文章主要介紹了Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法,需要的朋友可以參考下2018-03-03
詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用，頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04