uniapp獲取頁(yè)面高度與元素高度簡(jiǎn)單示例
一、獲取頁(yè)面高度
通過uni.getSystemInfoSync()方法可以獲取到系統(tǒng)信息,其中就包括了頁(yè)面高度等信息。
const { windowHeight } = uni.getSystemInfoSync(); // 獲取頁(yè)面高度
二、獲取元素高度
比如有一個(gè)金剛區(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( ){ }代表頁(yè)面已被渲染
<template> <view> <view class="xxoo" style="height: 650rpx; border: 3rpx orange solid; margin: 30rpx; background-color: #C0C0C0; padding: 30rpx;"> <view> 元素class="xxoo" </view> <view> 獲取當(dāng)前元素的實(shí)時(shí)高度為:{{heightEle}} </view> <view> 推薦無廣告的百度首頁(yè) https://baidu.rudon.cn </view> <view> 推薦無廣告的手機(jī)瀏覽器 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獲取頁(yè)面高度與元素高度的文章就介紹到這了,更多相關(guān)uniapp獲取頁(yè)面與元素高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一文詳解JavaScript數(shù)組對(duì)象和字符串對(duì)象
這篇文章主要介紹了JavaScript數(shù)組對(duì)象和字符串對(duì)象,文章中有詳細(xì)的代碼示例,對(duì)學(xué)習(xí)或工作有一定的幫助,需要的小伙伴可以參考一下2023-04-04javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動(dòng)態(tài)加載js文件多種解決辦法,有需要的朋友可以參考一下2013-11-11js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
這篇文章介紹了js圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-07-07javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件,但是得到的結(jié)果卻不是想要的,下面有個(gè)不錯(cuò)的示例,可以為大家詳細(xì)分解下2014-04-04JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過鍵值對(duì)來存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對(duì)象添加屬性的方式來增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07微信小程序控制臺(tái)提示warning:Now you can provide attr "wx:key" for a "w
這篇文章主要介紹了微信小程序控制臺(tái)提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解決方法,簡(jiǎn)單分析了wx:for警告提示相關(guān)解決方法,需要的朋友可以參考下2019-02-02JS localStorage存儲(chǔ)對(duì)象,sessionStorage存儲(chǔ)數(shù)組對(duì)象操作示例
這篇文章主要介紹了JS localStorage存儲(chǔ)對(duì)象,sessionStorage存儲(chǔ)數(shù)組對(duì)象操作,結(jié)合實(shí)例形式詳細(xì)分析了JS使用localStorage存儲(chǔ)對(duì)象以及sessionStorage存儲(chǔ)數(shù)組對(duì)象相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02