微信小程序自定义导航栏

在app.json里面配置，

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  }

在app.js里面获取导航栏的高度。

 onLaunch: function () {

var that = this.globalData;
//获取胶囊按钮的信息
    let menueObject = wx.getMenuButtonBoundingClientRect();
// 获取设备信息
wx.getSystemInfo({
  success: function(res) {
    //状态栏高度
    let statusbarHeight = res.statusBarHeight;
    //胶囊按钮与顶部的距离
    let navTop = menueObject.top;
    //导航高度
    let navHeight =  menueObject.height  +(navTop - statusbarHeight) * 2;
    that.navHeight = navHeight;
    that.navTop = navTop;
    that.statusbarHeight = statusbarHeight;
  },
})

现在微信不支持单个页面设置自定义导航栏，要设置就一起设置。所以最好的办法就是做一个组件。然后每个页面调用组件navbar。

屏幕快照 2019-12-02 下午3.21.50.png

Component({
  properties: {
    paramA: Number,
    paramB: String,
  },
  methods: {
    onLoad: function() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }
})

定义生命周期方法

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

const app = getApp();
Component({
  // 导航栏属性
  properties:{
    title:{
      type:String
    },
    titleColor: {
      type: String,
      value: '#ffffff'
    },
    statusBarColor: {
      type: String,
      value: '#ffffff'
    },
    statusBarOpeation: {
      type: Number,
      value: 1
    },
    back: {
      type: String,
      value: 'true'
    },
    navBarColor:{
      type:String,
      value:"#ffffff"
    },
    narbarOpeation:{
      type:Number,
      value :1
    }

  },
  // 导航栏初始化样式
  data:{
    statusBarStyle: '', // 状态栏样式
    navBarStyle: '' // 导航栏样式
    
  },
  /**
   * 组件的方法列表
   */
  methods:{
    back: function () {
      // this.triggerEvent('backTap', { name: 'mj' });
      wx.navigateBack();
    },
  },
 // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  lifetimes:{
    attached:function(){
    
      const statusBarStyle = `height: ${app.globalData.statusbarHeight}px;
        background-color: ${ this.data.statusBarColor};
      opacity: ${ this.data.statusBarOpeation };
    `;
      const navBarStyle = ` 
      height: ${ app.globalData.navHeight}px;
      background-color: ${ this.data.navBarColor };
      opacity: ${ this.data.narbarOpeation };
      color: ${ this.data.titleColor };
   ` ;
    
     this.setData({
        statusBarStyle: statusBarStyle,
        navBarStyle: navBarStyle
      });
     
    }
  }
})

在使用时，例如如下，要在gifts页面引用。首先，在json里面，引入

{
  "usingComponents": {
    "navbar": "/cmps/navbar/navbar"
  }
}

在.wxml中使用。

<navbar title="奖品详情" navBarColor="#D6E2E6" statusBarColor="#D6E2E6" titleColor="#444444" back="true" statusBarOpeation="1" narbarOpeation="1"></navbar>