uni-app 获取 scroll-view高度 获取页面剩余高度 所占手机屏幕的剩余高度

uni-app 获取自定义可视化高度

1.问题场景

直接上图 我想获取下面的view 可视化高度
下边图片标记的框保证数据多时，内容可以滑动 做到看视频时 可以看到下方内容。

2.解决思路

从上图可见 使用页面的总体高度 - 减去 标题的红框上方的高度（多余高度）即可解决此类问题。
也就是说 height = pageHeight - otherHeight；

3.官网描述(动态获取节点信息)

4.示例代码

完整代码示例贴出 js 部分代码省略 根据实际需求来复制。

<template>
	<view style="position: fixed;">
		<view style="width: 750upx;height: 423upx;" class="myVideoaaa">
			<video id="myVideo" style="width: 750upx;height: 423upx;" :src="videoUrl" @error="videoErrorCallback" :danmu-list="danmuList"
			 enable-danmu danmu-btn controls></video>
		</view>

		<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
		 @scroll="scroll" @touchstart="touchstart" @touchend="touchend">

			<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 0">
				<view v-for="(item,index) in 20" :key="index">
					aaaa{{index}}
				</view>

			</scroll-view>

			<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 1">
				<view v-for="(item,index) in 20" :key="index">
					bbbb{{index}}
				</view>

			</scroll-view>
			<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 2">
				<view v-for="(item,index) in 20" :key="index">
					cccc{{index}}
				</view>

			</scroll-view>


		</scroll-view>
	</view>
</template>
<script>
		// ........
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif

			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.purchase-body').boundingClientRect()
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					})
				},
				fail: (res) => {}
			})
		},
		// ........
</script>

<style lang='scss'>

	// ........
	.table-content {
		border: 1px red solid;
		overflow-y: scroll;
	}
	// ........
</style>

4.注意点

1.高度计算 必须等 dom元素出来后才可以计算，元素都没出来 无法计算，计算放在onReady 函数中 。

2.注意你所使用的高度单位 是 upx rpx px 还是什么，计算出来的单位 为 px 不用转化 直接使用即可。

3.计算代码写完后，需要测试app h5 微信小程序是否可以适配。

如有错误，欢迎评论下方指出，如有问题 联系 qq 1019011560 。