微信小程序自定义顶部栏

首先自定义导航栏。。。步骤省略。。。

<view class="top-bar" style="margin-top:{{navTop}}rpx;height:{{navHeight}}px">
    <text>首页</text>
</view>

注意navTop是rpx

wx.getSystemInfo({
            success(res) {
                let menuButtonObject = wx.getMenuButtonBoundingClientRect();
                let statusBarHeight = res.statusBarHeight,
                    navTop = menuButtonObject.top,
                    navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
                that.setData({navHeight, navTop});
            }
        })