uniapp獲取頁面高度與元素高度簡單示例
更新時間：2023年09月08日 09:01:11 作者：BUG生產(chǎn)者之一
在實際開發(fā)中我們會遇到不確定高度的情況,那么在uniapp中我們?nèi)绾潍@取區(qū)域的高度吶?這篇文章主要給大家介紹了關(guān)于uniapp獲取頁面高度與元素高度的相關(guān)資料,需要的朋友可以參考下
一、獲取頁面高度
通過uni.getSystemInfoSync()方法可以獲取到系統(tǒng)信息，其中就包括了頁面高度等信息。
const { windowHeight } = uni.getSystemInfoSync(); // 獲取頁面高度二、獲取元素高度
比如有一個金剛區(qū)，我們需要獲取到這塊區(qū)域的高度：
<view class="square_giant">
<block v-for="item in giantList" :key="item.id">
<view class="square_giant_item">
<image :src="item.image || ''" mode=""></image>
<text>{{ item.title || '' }}</text>
</view>
</block>
</view>const query = uni.createSelectorQuery().in(this);
query.select('.square_giant').boundingClientRect(({ height }) => {
console.log('square_giant的高度是：' + height + 'px');
}).exec();附：uniapp獲取元素的寬度、高度
完整代碼
重要：mounted( ){ }代表頁面已被渲染
<template>
<view>
<view class="xxoo" style="height: 650rpx; border: 3rpx orange solid; margin: 30rpx; background-color: #C0C0C0; padding: 30rpx;">
<view>
元素class="xxoo"
</view>
<view>
獲取當前元素的實時高度為：{{heightEle}}
</view>
<view>
推薦無廣告的百度首頁 https://baidu.rudon.cn
</view>
<view>
推薦無廣告的手機瀏覽器 https://viayoo.com/zh-cn/
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
heightEle: 0
}
},
methods: {
},
mounted() {
uni.createSelectorQuery().in(this).select(".xxoo").boundingClientRect(data => {
console.log(JSON.stringify(data))
// {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
this.heightEle = data.height
}).exec()
},
onLoad () {
}
}
</script>
<style>
</style>總結(jié)
到此這篇關(guān)于uniapp獲取頁面高度與元素高度的文章就介紹到這了,更多相關(guān)uniapp獲取頁面與元素高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
使用js/jquery獲取指定class名稱的3種方式總結(jié)
獲取class的值其實非常簡單,這篇文章主要給大家介紹了關(guān)于總結(jié)使用js/jquery獲取指定class名稱的3種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
下面小編就為大家?guī)硪黄狫avaScript Math 對象常用方法總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
這篇文章主要介紹了利用js實現(xiàn)簡易紅綠燈，幫助大家更好的利用js制作特效，美化網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
javascript中的循環(huán)語句for語句深入理解
for循環(huán)是多數(shù)語言都有的。在javascript中，for循環(huán)有幾種不同的使用情況，下面為大家一一介紹下2014-04-04
這篇文章主要介紹了JavaScript匿名函數(shù)用法,實例分析了匿名函數(shù)的功能、定義及具體用法,非常具有實用價值,需要的朋友可以參考下2015-02-02
JS面向?qū)ο缶幊袒A(chǔ)篇（二） 封裝操作實例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊谭庋b操作,結(jié)合實例形式詳細分析了JS面向?qū)ο蠓庋b操作的相關(guān)概念、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了從零搭一個自用的前端腳手架的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08