小程序自定义导航栏（封装得很好的组件）

小程序支持自定义导航栏，首先要读取手机状态栏的高度，在app.js中读取

wx.getSystemInfo({

            success: (res) => {

                console.log(`res.statusBarHeight`, res.statusBarHeight);

                this.globalData.height = res.statusBarHeight

            }

        })

下面是导航栏组件的wxml代码

   

        我是按钮

        我是标题

       

       

   

下面是组件的wxss代码：

.nav-box{

    position: fixed;

    top: 0;

    left: 0;

    background:red;

    width: 100%;

    height: 90px;

    z-index: 999;

}

.nav-content{

    position: absolute;

    top: 20px;

    width: 100%;

    background: #000;

    height: 46px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #fff;

    font-size: 36rpx;

    font-weight: 600;

}

.nav-content-commom{

    width: 100px;

}

最后附上业务逻辑：

var app = getApp();

Component({

    properties: {

    },

    data: {

        statusBarHeight: app.globalData.height,

        navHeight: 46,

    },

    methods: {

    }

})

组件很简单，自定义导航栏的高度大小，我定义为46像素，背景颜色和标题文案自行修改。