uniapp获取页面高度与元素高度简单示例
作者：BUG生产者之一
在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下
一、获取页面高度
通过uni.getSystemInfoSync()方法可以获取到系统信息，其中就包括了页面高度等信息。
const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度二、获取元素高度
比如有一个金刚区，我们需要获取到这块区域的高度：
<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>总结
到此这篇关于uniapp获取页面高度与元素高度的文章就介绍到这了,更多相关uniapp获取页面与元素高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！