获取微信小程序胶囊位置和高度

564 阅读1分钟

场景是页面需要在右上角一个按钮,由于直接设置会和微信小程序的胶囊重叠,需要获取胶囊的位置和高度进行动态设置位置

image.png

 onLoad(e) {
   // #ifdef MP-WEIXIN
   let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
   this.wxTop=menuButtonInfo.top+menuButtonInfo.height+5
   console.log(this.wxTop,"--->this.wxTop");
   // #endif
 }

menuButtonInfo的信息打印出来是,可以获取胶囊的布局信息,再根据信息和需求进行计算,完成页面布局

{
  bottom80,
  height32,
  left320,
  right407,
  top48,
  width87
}

除了这个需求外,设置自定义导航栏也可以使用这个来计算