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

我就是我 2023-07-24 02:44 16阅读 0赞

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

#### 1.问题场景 ####

直接上图 我想获取下面的view 可视化高度  
下边图片标记的框保证数据多时，内容可以滑动 做到看视频时 可以看到下方内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]

#### 2.解决思路 ####

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]

#### 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 。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]: /images/20230528/819a0ffee5a343518c5b0b44217dd0a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]: /images/20230528/cd04e7a3085d484bb27983a5d7819e76.png