微信小程序获取胶囊高度wx.getMenuButtonBoundingClientRect()

写在app.js里

App({
    onLaunch() {
        // 自定义头部
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
            success: res => {
                // 导航高度
                let statusBarHeight = res.statusBarHeight,
                    navTop = 0,
                    navBottom = 0,
                    // 胶囊按钮与右侧的距离=windowWidth-right+胶囊宽度
                    navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width,
                    navHeight = menuButtonObject.height + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
                // navHeight = res.system;
                if (res.system.toLowerCase()?.indexOf('android') >= 0 || res.system.toLowerCase()?.indexOf('ios') >= 0) {
                    navTop = menuButtonObject.top;
                    navBottom = (menuButtonObject.bottom + 10);
                }
                this.globalData.navTop = navTop; //胶囊距离顶部距离
                this.globalData.navHeight = navHeight; //胶囊高度
                this.globalData.navBottom = navBottom; //导航栏底部高度
                this.globalData.navObj = menuButtonObject.height; //胶囊高度
                this.globalData.navObjWid = navObjWid; //胶囊宽度（包括右边距离)
                this.globalData.windowWidth = res.windowWidth;
                this.globalData.windowHeight = res.windowHeight;
                // console.log(res,this.globalData,"0000000000000000000")
            },
            fail(err) {
                console.log(err)
            }
        })
      
    },
       globalData: {}
})

在你想用的页面引入

wxml：

<view class="header" style="margin-top: {{navTop}}px;">
    <view style="margin:10px 0;">
        <view style="padding-right:3%;">
            <view class="head-back flex-row j_b" style="width: {{windowWidth-navObjWid-20}}px;">
                <input type="text" placeholder="请输入知识关键字" class="input" bindinput="bindNames" value="{{name}}" placeholder-style="color:#999;opacity:0.8;font-size:28rpx;"/>
                <view style="color: #999;" bind:tap="getList">搜索</view>
            </view>
        </view>
    </view>
</view>

js：

const app = getApp();
Page({
  data: {
    // 导航栏高度
    navHeight: app.globalData.navHeight,
    // 导航栏距离顶部距离
    navTop: app.globalData.navTop,
    // 胶囊的高度
    // navObj: app.globalData.navObj,
    // 胶囊宽度+距右距离
    navObjWid: app.globalData.navObjWid,
    windowWidth:app.globalData.windowWidth,
    ...
  },
}）

json：

{
    "usingComponents": {},
    "navigationStyle": "custom"
  }

wxss：

page {
    width: 100%;
    background: #f9f9f9;
  }
  .header {
    width: 100%;
    z-index: 1000;
  }
  
  .header .header-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: ellipse(95% 50% at 50% 35%);
  }
  
  .head-back {
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 60rpx;
    border-radius: 50rpx;
    border: 1rpx solid rgba(204, 204, 204, .6);
    /* width: calc(100% - 250rpx); */
    /* calc(100%-{{navObjWid+200}})px */
    width: 73%;
    margin-left: 25rpx;
    position: relative;
    display: flex;
    align-items: center;
  }
  
 
  
  .input{
    height: 60rpx;
    width: 82%;
  }