微信小程序自定义导航栏

效果大概就是这样

自定义导航

//json文件配置
{
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "return": "/component/return/return" 
  }
}
//wxml文件调用组件

组件部分

js

//js
/*
 * 自定义导航栏返回按钮
 */
const App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  lifetimes: {
    attached: function () {
      this.setData({
        navTop: App.globalData.navTop
      })
    }
  },
  ready: function () {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    //返回上页
    backTo: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

wxml

wxss

.return-back {
  width: 20rpx;
  height: 36rpx;
  position: fixed;
  left: 4rpx;
  z-index: 9999;
  padding: 20rpx;
}

app.js

//onLaunch
/**
     * 自定义导航栏 返回按钮位置计算
     */
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })