uniapp顶部自定义NavBar时适配刘海屏？

Sir928

uni-app提供的系统参数获取的APIlet systemInfo = uni.getSystemInfoSync();,systemInfo.statusBarHeight就是系统的状态栏高度。在设计NAVBAR的时候可以加上一个空白div，高度就是为状态栏的高度。

<view class="nav-bar" :style="colorStyle">
                <view class="status-bar" :style="statusBarStyle"></view>
                <view class="content" v-if="ids.length === 0">
                        <text @click="backForward" class="back-icon iconfont icon-fanhui"></text>
                        <text class="title">{{title}}</text>
                </view>
                <view class="select" v-else>
                        <text class="txt" @click="cancelSelect">取消</text>
                        <text class="nm">已选择{{ids.length}}个</text>
                        <text class="txt" @click="selectedAll">{{chooseText}}</text>
                </view>
</view>
computed: {
        statusBarStyle() {
        // 这里我将statusBarHeight存储在了vuex内，为在特殊的navbar自定义时调用
        // 建议在在statusBarHeight + 20高度，以适配刘海屏的影响
                return `width: 100%;height: ${this.$store.state.statusBarHeight}rpx;`
        }
}