微信小程序胶囊位置计算，避开胶囊位置

Garc2023-08-21 12:16

由于小程序在不同的手机上顶部布局会发生变化，不能正确避开胶囊位置，所以通过官方给出的胶囊信息，可以计算出胶囊位置，并避开

图示例：

此处思路是，获取胶囊底部位置，并拉开10个px

计算出来的值一定要用px，不要用rpx！

计算出来的值一定要用px，不要用rpx！！

计算出来的值一定要用px，不要用rpx！！！

1、首先可以在app.js 中写入以下代码：

TypeScript 复制代码

onLaunch() {
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
    //获取胶囊信息
    this.menu = wx.getMenuButtonBoundingClientRect()
  },

在需要的页面的js中引用 const app = getApp() ，这样就可以全局使用了

2、计算娇娘位置

公式：娇娘底部位置 = 娇娘顶部值 + 娇娘高度

带入公式：娇娘底部位置 = app.menu.top + app.menu.height

需要拉开距离就在后面再加自己需要的数值

例如：app.menu.top + app.menu.height + 10

3、引用计算的值示例