微信小程序-自定义导航栏

第一步 添加属性 “navigationStyle”: “custom”

全局： app.json中添加属性 “navigationStyle”: “custom”

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

局部： 单个文件index.json中添加属性 “navigationStyle”: “custom”

{
   
  "navigationBarTitleText": "我的",
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom",
  "usingComponents": {
   }
}

第二步 自定义导航栏

获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
app.js

// app.js
App({
   
  onLaunch() {
   
    //自定义导航栏 获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
    wx.getSystemInfo({
   
      success: (res) => {
   
        let custom = wx.getMenuButtonBoundingClientRect()
        this.globalData.statusBarHeight = res.statusBarHeight
        this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
      }
    })
  },
  globalData: {
   
    statusBarHeight: 0,
    navBarHeight: 0,
  }
})

第二步 自定义组件

navbar.js

const app = getApp()
Component({
   
  // multipleSlots 为组件开启多插槽模式
  options: {
   
    multipleSlots: true,
  },
  // externalClasses 为组件指定多个外部样式类
  externalClasses: ['nav-bgc-class', 'nav-title-class',