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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值