在uniapp中获取可视化高度

在做uniapp的顶栏滑块的时候，放置内容进去时发现不见了，如图

因此需要自己去获取高度，解决方法：

data(){
    return{
    //初始化高度值
    clentHeight:0,
    }
}
//这个方法必须写在onReady中，如果写在onLoad会报错
onReady() {
    let view = uni.createSelectorQuery().select(".home-data");
    view.boundingClientRect(data => {
        this.clentHeight = data.height;
    }).exec();
},

再把获取到的高度值写在swiper中

<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
    <swiper-item v-for="(item,index) in topBar" :key="index">
        <view class="home-data">
            <IndexSwiper></IndexSwiper>
            <Recommend></Recommend>
            <Card cardTitle="猜你喜欢"></Card>
            <CommodityList></CommodityList>
        </view>
    </swiper-item>
</swiper>

这样就可以展示完整的内容了

但是！！！

这样会出问题，因为在swiper中都是一些组件，所以会获取不到高度，上述方法只适用在一般情况下，如果带有组件，以下是解决方法

<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
    <swiper-item v-for="(item,index) in topBar" :key="index">
    需要把这些组件包裹在scroll里，并且加上style
        <scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'">
            <view class="home-data">
                <IndexSwiper></IndexSwiper>
                <Recommend></Recommend>
                <Card cardTitle="猜你喜欢"></Card>
                <CommodityList></CommodityList>
            </view>
        </scroll-view>
    </swiper-item>
</swiper>

onReady() {
 uni.getSystemInfo({
    success: (res) => {
       this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();  // -80是减去顶部选项卡的高度
    }
  })
},
methods:{
    // 获取可视区域高度[兼容]
    getClientHeight(){
        const res = uni.getSystemInfoSync();
        const system = res.platform;  //获取客户端平台 ios,android
        if(system === 'ios'){
            return 44+res.statusBarHeight;
        }else if(system === 'android') {
            return 48+res.statusBarHeight;
            //return res.statusBarHeight - 40; //我的是红米note9，使用上面+48的有问题，所以自己调了
        }else {
            return 0;     //微信小程序没有问题
        }
    }
}

会出现这样的问题主要是因为现在的手机大都有刘海屏，所以计算起来比较麻烦