状态栏穿透问题

目前的项目需要做一个 tab 切换效果 ,暂时使用的方法是使用swiper来实现 类似这样

<swiper :indicator-dots="false" :autoplay="false" :interval="0" :duration="300" class="swiper-box" :style="{height:view_height}">  
            <swiper-item >  
                <index></index>  
            </swiper-item>  
            <swiper-item class="bg-cyan">  

            </swiper-item>  
        </swiper>

第一个页面是其中的 index 组件,但是在index页面去进行滑动的时候会发现一个问题,就是滑动到下方的时候, index 组件会出现状态栏穿透问题,如图所示

尝试设定

"navigationBarBackgroundColor":"#000000",

属性无效,
在页面之中尝试

plus.navigator.setStatusBarStyle('black');

还是无效,

感觉这个问题是因为首页 使用swiper导致的高度问题. 目前的高度问题是在index 组件页面使用

const query = uni.createSelectorQuery().in(this);  
            query.select('.main').boundingClientRect(data => {  
                    console.log(data)  
                this.view_h = data.height  
                // this.$emit("",this.list);  
                uni.$emit('h',{msg:data})  
            }).exec();

获取页面内容高度,在主页面进行接收,然后赋值给给主页面 swiper-item 高度.但是这种方法感觉不是很完美,但是不设定的主页的swiper会默认设置高度150px,

请问下大家针对这种swiper 渲染不同的组件页面有没有其他的办法. 还有就是关于状态栏的穿透问题有没有好的解决方案