uniapp开发-顶部导航栏

大家好，我是不想当程序猿的阿许。

围绕的问题

顶部标题或者输入框如何与微信小程序的胶囊按钮对齐

产生的问题

1. 如何获取胶囊按钮的位置信息

onLoad() {
    uni.getSystemInfo({
      success: res => {
        const { statusBarHeight, windowWidth } = res;
        const menuButtonRect = {
          top: statusBarHeight + 6,
          left: windowWidth - 48,
          width: 40,
          height: 32,
          right: windowWidth - 8,
          bottom: statusBarHeight + 38
        };
        const navBarHeight = menuButtonRect.bottom + menuButtonRect.top - statusBarHeight;
        const navBarMarginLeft = menuButtonRect.left - 10;
        const navBarMarginRight = windowWidth - menuButtonRect.right - 10;
        this.statusBarHeight = statusBarHeight;
        this.navBarMarginLeft = navBarMarginLeft;
        this.navBarMarginRight = navBarMarginRight;
      }
    });
  }

2. 通过上述代码，竟然无法获取到胶囊按钮的位置信息。然后上网查找解决方案，参考t.csdn.cn/UlEju 的文章，得出解决方法。十分感谢这位UP。将上述代码放在mounted中，可以正确得出胶囊按钮的位置信息。

   

3. 这个问题着实是我蠢了。我使用浏览器进行调试，F12抛出错误typeerror: uni.getmenubuttonboundingclientrect is not a function。我一开始还在思考为什么函数存在但是抛出错误说此函数非函数。后来才反应过来，所谓的uni.getmenubuttonboundingclientrect函数其实对应着微信小程序的原生函数wx.getmenubuttonboundingclientrec。浏览器当然不能识别并执行此函数，所以才会抛出异常。

顶部导航栏的细节还待开发，未完待续。