标签：自定义 微信 胶囊 menuButtonObject globalData 效果图 res 导航 wx

一、在需要设置头部导航栏的页面中通过json配置 "navigationStyle": "custom" ，自定义导航栏，只保留胶囊按钮，效果如下：

 二、做完上面的步骤，基本上就可以自定义导航栏了，当然，这还没完，从页面上可以看出，页面里的内容被挡住了，可以通过页面样式加上内边距内容就出来了：

三、可以看出这个内边距是固定死了的，不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息：

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right

四、App.js 添加代码如下：

// app.js
App({
  // 定义一个全区对象用于保存一些设备及胶囊的数据, 在其他页面onLoad之后可以通过
  // const App = getApp()， App.globalData. 的方式访问到
  globalData: {},
  onLaunch() {
    // 获取胶囊信息
    let menuButtonObject = wx.getMenuButtonBoundingClientRect()
    console.log(menuButtonObject)
    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
        console.log(res)
        // 整个导航栏的高度
        let navHeight = menuButtonObject.top + menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight)*2
        // 导航栏的高度
        let nav = navHeight - res.statusBarHeight

        // 挂载到全区变量 globalData 上
        this.globalData.navHeight = navHeight
        this.globalData.nav = nav

        // 胶囊与左边的距离
        this.globalData.menuLeft = menuButtonObject.left
        // 胶囊的高度
        this.globalData.menuHeight = menuButtonObject.height
        // 胶囊距离顶部的高度
        this.globalData.menuBot = menuButtonObject.top - res.statusBarHeight
        // 整个设备的宽度
        this.globalData.windowWidth = res.windowWidth
      },
      fail: err => {
        console.log(err)
      }
    })


    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

五、可以自定义导航栏样式了： 

标签：自定义,微信,胶囊,menuButtonObject,globalData,效果图,res,导航,wx
来源： https://blog.csdn.net/easttour/article/details/120924468

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。