uni-app真机调试报错：TypeError: null is not an object (evaluating ‘data.height‘) __ERROR

uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。使用uni.getSystemInfo来获取内容区块的高度值，这样就解决了上面的报错信息，也实现了滑动的效果。：这段代码是没有问题的，之所以会报这个错是因为在home-data下放的是自定义组件，并且是进行了数据请求渲染出来的值，就获取不到这个home-dat

以对_

2314人浏览 · 2022-09-06 10:51:23

以对_ · 2022-09-06 10:51:23 发布

在小程序里能够正常运行，app里就会报这个错
TypeError: null is not an object (evaluating ‘data.height’) __ERROR
在这里插入图片描述
报错代码：这里是通过home-data节点来获取可视区域的高度

<view class="home-data">
	<block v-for="(k,i) in item.data" :key="i">
		<!-- 推荐模板 -->
		<IndexSwiper v-if="k.type === 'swiperList'" :dataList="k.data"></IndexSwiper>
		<template  v-if="k.type === 'recommenList'">
			<Recommend :dataList="k.data"></Recommend>
			<Card cardTitle="猜你喜欢"></Card>
		</template>
		<CommodityList v-if="k.type === 'commodityList'" :dataList="k.data"></CommodityList>
	</block>
</view>

onReady(){
	// 获取（home-data）内容高度
		let view = uni.createSelectorQuery().select(".home-data");
		view.boundingClientRect(data => {
		  this.clientHeight = data.height;
		}).exec();
},

报错原因：这段代码是没有问题的，之所以会报这个错是因为在home-data下放的是自定义组件，并且是进行了数据请求渲染出来的值，就获取不到这个home-data了。具体为什么获取不到不了解。
解决方法：使用uni-app里的scroll-view ，将home-data节点换成scroll-view

<scroll-view scroll-y="true" :style="'height:'+clientHeight+'px'">
	<block v-for="(k,i) in item.data" :key="i">
		<!-- 推荐模板 -->
		<IndexSwiper v-if="k.type === 'swiperList'" :dataList="k.data"></IndexSwiper>
		<template  v-if="k.type === 'recommenList'">
			<Recommend :dataList="k.data"></Recommend>
			<Card cardTitle="猜你喜欢"></Card>
		</template>
		
		<CommodityList v-if="k.type === 'commodityList'" :dataList="k.data"></CommodityList>
	</block>
</scroll-view>

获取内容区块高度：
uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。使用uni.getSystemInfo来获取内容区块的高度值，这样就解决了上面的报错信息，也实现了滑动的效果。

onReady(){
	uni.getSystemInfo({
		success:(res)=>{
			this.clientHeight = res.windowHeight - uni.upx2px(80); 
			// uni.upx2px(80)是将80rpx转化成px，这里减的是顶部的横向滑动导航栏的高度
		}
	})
},