小程序自定义头部返回按钮的位置

背景：

小程序自定义头部之后，仅保留小程序的胶囊，返回按钮不会保留。这样的话就需要我们自己自定义一个返回按钮了。按钮的位置也需要我们自己配置。

wxml实现代码：

<view class="arrow__back" style="top: {{arrowHeight}}px;"></view>

wxss实现代码：

.arrow__back{
  width: 48rpx;
  height: 48rpx;
  background: url("./images/back.png") no-repeat center;
  background-size: 48rpx 48rpx;
  position: fixed;
  left: 16rpx;
  top: 0;
  z-index: 100;
}

js实现代码：

data: {
    arrowHeight: 0
  },
  onLoad: function (options) {
    let that = this;
    wx.getSystemInfo({
      success (res) {
        that.setData({
          arrowHeight: res.statusBarHeight + 10
        })
      }
    })
  }