微信小程序封装自定义导航栏(兼容安卓及ios的手机型号)

最新推荐文章于 2025-02-21 23:54:40 发布

皮卡丘-杰尼龟

最新推荐文章于 2025-02-21 23:54:40 发布

阅读量732

点赞数 6

文章标签：微信小程序 android ios

本文链接：https://blog.csdn.net/weixin_46328739/article/details/138305399

版权

在 app.json 文件中设置导航栏的样式：

"window": {
   
  "navigationStyle": "custom"
},
"usingComponents": {
   
        "nav-bar": "/components/navbar/navbar"
    }

在app.js中获取设备顶部窗口的高度

App({
   

  onLaunch: function (options) {
   

    var _this = this;
    //自定义导航栏 获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
    wx.getSystemInfo({
   
      success: (res) => {
   
        // 基础库 2.1.0 开始支持wx.getMenuButtonBoundingClientRect()，低版本需要适配
        let custom = wx.getMenuButtonBoundingClientRect()

        _this.globalData.statusBarHeight = res.statusBarHeight
        _this.globalData.navTop = custom.top
        _this.globalData.navHeight = custom.height
      
      }
    })

  },


  globalData: {
    // 全局数据
    statusBarHeight: 0,
    navTop: 0,