关于微信小程序:微信小程序自定义导航栏机型适配

自定义微信小程序头部导航栏，有几种形式

形式一

{
  "navigationStyle": "custom" // 将navigationStyle从默认default改为custom
}

定义此办法后，头部的导航栏会去掉，导航栏下的元素会间接向上挪动到原导航栏的地位，能够再app.json配置成全局沉迷式导航栏，以及在单页面配置沉迷式导航栏。

形式二

应用组件
这里应用vant组件作为演示

组件配置的NavBar，款式在官网文档上有阐明，依据文档阐明批改款式即可。
官网文档：https://vant-contrib.gitee.io/vant-weapp/#/nav-bar

机型适配

因为自定义navBar了，导航栏上面的元素会间接向上偏移，须要离顶部的间隔才能够复原到失常的地位，此时设置的间隔依据不同的机型，地位也会不同，所以这里就须要做到机型适配。
形式一：
依据微信小程序胶囊到顶部以及胶囊的高度，算出navBar下的内容到顶部的间隔

// js
let pillHeight = wx.getMenuButtonBoundingClientRect().top  // 胶囊到顶部的高度
let pill = wx.getMenuButtonBoundingClientRect().height  // 胶囊的高度
this.setData({topHeight : pillHeight +pill })

// 页面   动静设置margin-top高度
 <view class="content_bg" style="margin-top: {{capsuleHeight}}px;">内容</view>

形式二:
依据小程序头部的高度加导航高度的间隔动静计算内容到顶部的间隔

// js
 wx.getSystemInfo({
        success: res => {
          let navWindowHeight = res.statusBarHeight + 46; // 小程序头部的高度 + 导航高度
          this.setData({capsuleHeight : navWindowHeight })  // 赋值高度
        }, fail(err) {
      console.log(err);
    }
// 页面
<view class="content_bg" style="margin-top: {{capsuleHeight }}px;">内容</view>

因为机型的不同，动静计算的高度也不同，不同机型对胶囊到顶部的高度都有差别，而且获取到的胶囊到顶部或者小程序头部的高度的值单位是 px ,所以间接将获取到的值赋值给间隔顶部的间隔即可，否则在动静计算高度的时候，px不会动静适配屏幕的大小变动，目前来说用形式二适配率高一些，在开发的时候须要依据理论状况，做不同的调整。

动静计算TabBar的高度

  // tabbar高度
   getTabHei() {
        wx.getSystemInfo({
          success: (res) => {
            console.log(res)
            this.setData({
              tabBatHeight: res.screenHeight - res.safeArea.bottom + 50
            })
         }
     })

将计算出来的tabBatHeight间接写在页面的行内款式中即可