微信小程序自定义顶部导航栏

<template>
    <view>
        <!-- 顶部 -->
        <view class="topview">
            <!-- 导航栏 -->
            <view class="navbar" :style="{
          'padding-top': statusBarHeight + 'px',
          height: navBarHeight + 'px'
        }">
                <image src="https://chengfei5470.oss-cn-hangzhou.aliyuncs.com/kxmall/gobackleft.png" class="lefticon"
                    mode="widthFix"></image>
            </view>
            <!-- 内容 -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBarHeight: 0, // 状态栏高度
                navBarHeight: 44, // 导航栏高度，iOS默认44，Android默认48
            }
        },
        computed: {

        },

        onShow() {

        },
        onLoad() {
            this.getSystemInfo();
        },
        methods: {
            // 获取系统信息
            getSystemInfo() {
                const info = uni.getSystemInfoSync();
                this.statusBarHeight = info.statusBarHeight || 25;
                console.log('this.statusBarHeight', this.statusBarHeight)
                //    判断平台调整导航栏高度
                if (info.platform === 'android') {
                    this.navBarHeight = 48;
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import './PasswordLogin.scss';
</style>

css

.topview{
    width: 749rpx;
    height: 456rpx;
    background: linear-gradient( 180deg, #6EC0FF 0%, rgba(249,249,249,0) 100%);
}
.navbar {
  background-color: #fff;
  display: flex;
  align-items: center;
}

.lefticon {
  width: 24px;
  height: 24px;
  margin-left: 16px;
  background-color: pink;
}