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

最近公司小程序有个需求 简单来说就是除开首页和我的页面
其他页面左上角都需要有一个返回按钮 能返回首页 最开始我说的是不用做 那两个tabbar页面 下面可以点啊
结果客户那边非得要 没办法 客户就是上帝

那么 话不多说 我们直接开干

首先是新建一个custom-navbar组件 目录结构如下

然后就是考虑到每个机型的状态栏高度不一样 所以需要用wx提供的getSystemInfoSync api
获取到statusBarHeight 状态栏的高度 就是手机电池电量那个区域的高度

    const {
    statusBarHeight } = wx.getSystemInfoSync();
    this.globalData.statusBarHeight = statusBarHeight;

拿到statusBarHeight后 可以编写custom-navbar.wxml

<!-- custom-navbar.wxml --> 
<view class="navbar" style="height: {
       {
       statusBarHeight + 44}}px"> 
  <view class="navbar-content" style="top: {
       {
       statusBarHeight}}px;height: 44px;">
    <view class="navbar-left" style