Uniapp to get page height and element height simple example

1. Get the page height

System information can be obtained through the () method, including page height and other information.

const { windowHeight } = (); // Get page height

2. Obtain the element height

For example, there is a Vajra area where we need to obtain the height of this area:

<view class="square_giant">
	<block v-for="item in giantList" :key="">
		<view class="square_giant_item">
			<image :src=" || ''" mode=""></image>
			<text>{{  || '' }}</text>
		</view>
	</block>
</view>

const query = ().in(this);
('.square_giant').boundingClientRect(({ height }) =&gt; {
  ('The height of square_giant is:' + height + 'px');
}).exec();

Attachment: Uniapp gets the width and height of the element

Complete code

important:mounted( ){ }It means the page has been rendered

&lt;template&gt;
	&lt;view&gt;
		&lt;view class="xxoo" style="height: 650rpx; border: 3rpx orange solid; margin: 30rpx; background-color: #C0C0C0; padding: 30rpx;"&gt;
			&lt;view&gt;
				elementclass="xxoo"
			&lt;/view&gt;
			&lt;view&gt;
				获取当前element的实时高度为：{{heightEle}}
			&lt;/view&gt;
			&lt;view&gt;
				Recommended Baidu homepage without ads 
			&lt;/view&gt;
			&lt;view&gt;
				Recommended ad-free mobile browser /zh-cn/
			&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt;
&lt;/template&gt;
&lt;script&gt;
	export default {
		data() {
			return {
				heightEle: 0
			}
		},
		methods: {
		},
		mounted() {
			().in(this).select(".xxoo").boundingClientRect(data =&gt; {
			  ((data))
			  // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
			   = 
			}).exec()
		},
		onLoad () {
		}
	}
&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;

Summarize

This is the article about uniapp obtaining page height and element height. For more related uniapp obtaining page height and element height content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!