小程序中的页面导航是可以自定义的，一般情况下，自定义导航跟页面转发的按钮并排的话，页面相对整齐好看一些，如下图所示的效果

这种自定义导航也不复杂，首先理解好如下4点：

1.转发按钮是固定宽高的，高度为32px

2.小程序页面需要自定义导航时，需先在对应目录下设置.json配置文件

3.状态栏的高度，及页面其他元素布局或者有下拉刷新的情况时，需要根据具体情况去处理样式等问题

4.抽取为组件

话不多说，直接上代码

配置文件：

wxml:

<!--components/navbar/index.wxml-->
<view class="navbar-wrap" style='top: {{navPt + 4}}px;background: {{bgColor}};'>
  <view class='navbar' wx:if="{{navShow}}">
    <view class='navbar-hb' wx:if="{{homeShow}}">
      <text class='iconfont icon-zuojiantou' bindtap='toBack'></text>
      <text class='iconfont icon-shouye' bindtap='toHome'></text>
    </view>
    <view class='navbar-aw' wx:else bindtap='toBack'>
      <text class='iconfont icon-zuojiantou'></text>
    </view>
  </view>
  <view class='navbar-title' wx:if="{{ptShow}}">
    {{pageTitle}}
  </view>
</view>

wxss:

/* components/navbar/index.wxss */
.navbar-wrap {
  width: 100%;
  padding: 0 10px;
  height: 32px;
  background: #fff;
  /* background: rgba(255, 255, 255, 0.9); */
  text-align: center;
  position: fixed;
  box-sizing: border-box;
}
.navbar {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 10;
}
.navbar-hb {
  position: relative;
  width: 88px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #eee;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.navbar-hb text {
  display: inline-block;
  font-size: 32rpx;
  color: #333;
  width: 50%;
}
.navbar-hb::after {
  content: '';
  display: block;
  height: 16px;
  width: 1px;
  background: #eee;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -0.5px;
}
.navbar-title {
  font-size: 36rpx;
  color: #333;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.navbar-aw {
  width: 88px;
  height: 32px;
  line-height: 32px;
  text-align: left;
}

js:

// components/navbar/index.js
const App = getApp()
Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    bgColor: {
      type: String,
      value: '#fff'
    },
    pageTitle: {
      type: String,
      value: '默认测试页面'
    },
    navShow: {
      type: Boolean,
      value: true
    },
    homeShow: {
      type: Boolean,
      value: true
    },
    ptShow: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},
  lifetimes: {
    attached: function () {
      this.setData({
        navPt: App.globalData.statusHeight
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 返回上一页
    toBack: function () {
      wx.navigateBack({
        delta: 1
      })
    },
    // 回主页
    toHome: function () {
      wx.reLaunch({
        url: '/pages/index/index' // 项目主页地址
      })
    }
  }
})

引用代码：

<navbar page-title="商品列表"></navbar>

最后在app.js当中，通过如下代码去拿到状态栏的高度

//app.js
App({
  onLaunch: function () {
      wx.getSystemInfo({
          success: (res) => {
            console.log(res)
            var gData = this.globalData;
            gData.statusHeight = res.statusBarHeight;
            gData.isIOS = res.system.indexOf('iOS')>-1;
            gData.navHeight = gData.isIOS?44:48;
            gData.windowWidth = res.windowWidth;
            gData.windowHeight = res.windowHeight;
          }
      })
  },
  globalData: {

  }
})

ok,收工