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