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 。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐