uniapp 自定义导航栏固定

开发app时使用自定义导航栏,导航栏随页面滚动,这时需要将导航栏固定头部,中间内容滚动,这里要同时适配app和h5

<template>
    <view class="safety homePage">
        <!--  #ifdef APP-PLUS -->
        <view class=" headerBox" :style="{paddingTop: systemBarHeight + 'px'}">
            <!--  #endif -->
            <!--  #ifdef H5 -->
            <view class="flex-between headerBox" :style="`paddingTop:${systemBarHeight+10}px`">
                <!--  #endif -->
                <!--你的header-->
            </view>
            <!-- 主要内容区 -->
            <!--  #ifdef APP-PLUS -->
            <view class="mainBox" :style="`marginTop:${systemBarHeight+24}px`">
                <!--  #endif -->
                <!--  #ifdef H5 -->
<!-- 加的高度是调试得来得,我也不知道这样行不行-->
                <view class="mainBox" :style="`paddingTop:${systemBarHeight+65}px`">
                    <!--  #endif -->
                </view>
            </view>
</template>
<script>
    export default {

        data() {
            return {
                systemBarHeight: '',
            }
        },
        created() {
            this.getSysteminfo()
        },
        methods: {
            // 获取系统栏高度
            getSysteminfo() {
                uni.getSystemInfo({
                    success: res => {
                        this.systemBarHeight = res.statusBarHeight;
                        console.log(this.systemBarHeight, "this.systemBarHeight")
                    }
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .homePage {
        .headerBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            // #ifdef APP-PLUS
            padding: 30rpx;
            // #endif
            // #ifdef H5
            padding: 30rpx;
            // #endif
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 999;
            background: #FFFFFF;
        }

        .mainBox {
            padding: 0 30rpx 30rpx;
        }
    }
</style>