欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>
				獲取當(dāng)前元素的實時高度為：{{heightEle}}
			</view>
			<view>
				推薦無廣告的百度首頁 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獲取頁面高度與元素高度的文章就介紹到這了,更多相關(guān)uniapp獲取頁面與元素高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

最新評論