swan.getMenuButtonBoundingClientRect

基础库 3.20.3 开始支持,低版本需做兼容处理。

解释:获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
Web 态说明: 在 Web 态环境下,不存在右上角菜单按钮,调用该方法会返回一个固定值,仅供参考。

# 方法参数

# 返回参数说明

参数 类型 说明
width number 宽度,单位:px
height number 高度,单位:px
top number 上边界坐标,单位:px
right number 右边界坐标,单位:px
bottom number 下边界坐标,单位:px
left number 左边界坐标,单位:px

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 1: 属性全集

    <view class="wrap">
        <view class="card-area">  
            <view class="list-area border-bottom" s-for="item in infoList">
                <view class="list-item-key-4">{{item.chineseName}}}</view>
                <view class="list-item-value">{{item.value}}</view>
            </view>        
            <button type="primary" bindtap="getMenuButtonBoundingClientRect">点击获取胶囊布局信息</button>
        </view>
    </view>
    
    Page({
        data: {
            result: '',
            infoList: [{
                chineseName: '高度',
                engName: 'height', 
                value: ''
            }, {
                chineseName: '宽度',
                engName: 'width', 
                value: ''
            }, {
                chineseName: '距下',
                engName: 'bottom', 
                value: ''
            }, {
                chineseName: '距左',
                engName: 'left', 
                value: ''
            }, {
                chineseName: '距右',
                engName: 'right', 
                value: ''
            }, {
                chineseName: '距上',
                engName: 'top', 
                value: ''
            }]
        },
        getMenuButtonBoundingClientRect() {
            try {
                const result = swan.getMenuButtonBoundingClientRect();
                console.log('getMenuButtonBoundingClientRect success', result);
                this.updateInfoList(result);
            } catch (err) {
                console.log('getMenuButtonBoundingClientRect fail', err);
            }
        },
    
        updateInfoList(res) {
            let infoList = this.getData('infoList');
            for (let i = 0; i < infoList.length; ++i) {
                if (res[infoList[i].engName] === '') {
                    infoList[i].value = '暂无';
                } else {
                    infoList[i].value = res[infoList[i].engName]+ "px";
                }
            }
            this.setData('infoList', infoList);
        }
    });
    
    

    # 参考示例

    # 参考示例 1: 自定义导航栏

      <view class="status-height" style="height:{{ statusHeight }}px">状态栏</view>
      <view class="nav-height" style="height:{{ navHeight }}px">导航栏</view>
      
      Page({
          data: {
              statusHeight: 0,  //状态栏高度
              navHeight: 0      //导航栏高度
          },
          /**
           * 获取状态栏|导航栏高度,
           */
          onLoad() {
              let capsule = swan.getMenuButtonBoundingClientRect() ;
              console.log('胶囊信息是:', capsule);
              swan.getSystemInfo({
                  success: res => {
                      console.log('navHeight', capsule.height + (capsule.top - res.statusBarHeight) * 2);
                      // 与res.navigationBarHeight相同
                      console.log('navHeight', res.navigationBarHeight);
                      let navHeight = capsule.height + (capsule.top - res.statusBarHeight) * 2;
                      // 这里可以实现文字标题与胶囊的中线对齐的需求
                      this.setData({
                          statusHeight: res.statusBarHeight,
                          navHeight
                      })
                  }
              })
          }
      });