在小程序里能够正常运行,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,这里减的是顶部的横向滑动导航栏的高度
		}
	})
},

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐