微信小程序自定义navigation导航栏，高度定义等于原始高度

写在前面：文章中属性是手写，如有错误，按提示改正就行。

当然第一步得设置 “navigationstyle":"custum" 也就是自定义导航栏，这时候导航栏就会消失。

我们自定义一个view，设置成导航栏的宽高微信小程序tabbar高度，绝对定位在屏幕上就可以。

最难的地方是获取原始导航栏高度微信小程序tabbar高度，宽度100%，这个好说。对了，这个view的父元素得设置成display:flex; flex-direction:colum，也就是用flex垂直排列。还要设置下page。整个css代码我先粘贴出来

page {
    height: 100%;
    
  }
  .navbar {
    width: 100%;
    background-color: black;
    /* overflow: hidden; */
    position: relative;
    top: 0;
    left: 0;
    /* z-index: 10;
    flex-shrink: 0; */
  }
.view-page {
    display: flex;
    height: 100%;
    flex-direction: column;
    /* overflow: hidden; */
  }
  
  .view-page .page-content {
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
  }

然后是wxml的结构代码

最后是js

const app = getApp()
Page({
  data:{
    myheight:""
  },
  globalData: {
  },
  onShow: function () {
    var that=this;
    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.myheight=navHeight;
        that.setData({
          myheight: navHeight
        })
        console.log( this.myheight );
        // this.globalData.navTop = navTop;
        // this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})

这里需要说明的是，要用在onshow方法里。别用在onload，因为onload时候还获取不到高度。还有that this来传值，还有setData方法来传值。

好了，这几点注意就可以了。理解了，自然就会用了。

下一步出个uniapp的 自定义设置微信导航栏navigation的文章，敬请关注。