title: swan.getMenuButtonBoundingClientRect header: develop nav: api sidebar: menu_info

webUrl: https://qft12m.smartapps.cn/swan-api/get-menu-button-bounding-client-rect/get-menu-button-bounding-client-rect

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

解释：获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

方法参数

无

返回参数说明

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

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/get-menu-button-bounding-client-rect/get-menu-button-bounding-client-rect - 图1 请使用百度APP扫码

代码示例1 - 属性全集

在开发者工具中预览效果

:::codeTab

  1. <view class="container">
  2.     <view class="card-area">  
  3.         <view class="list-area border-bottom" s-for="item in infoList">
  4.             <view class="list-item-key-4">{{item.chinaName}}}</view>
  5.             <view class="list-item-value">{{item.value}}</view>
  6.         </view>        
  7.         <button type="primary" bindtap="getMenuButtonBoundingClientRect">点击获取胶囊布局信息</button>
  8.     </view>
  9. </view>
  1. Page({
  2.     data: {
  3.         result: '',
  4.         infoList: [{
  5.             chinaName: '高度',
  6.             engName: 'height', 
  7.             value: ''
  8.         }, {
  9.             chinaName: '宽度',
  10.             engName: 'width', 
  11.             value: ''
  12.         }, {
  13.             chinaName: '距下',
  14.             engName: 'bottom', 
  15.             value: ''
  16.         }, {
  17.             chinaName: '距左',
  18.             engName: 'left', 
  19.             value: ''
  20.         }, {
  21.             chinaName: '距右',
  22.             engName: 'right', 
  23.             value: ''
  24.         }, {
  25.             chinaName: '距上',
  26.             engName: 'top', 
  27.             value: ''
  28.         }]
  29.     },
  30.     getMenuButtonBoundingClientRect() {
  31.         try {
  32.             const result = swan.getMenuButtonBoundingClientRect();
  33.             console.log('getMenuButtonBoundingClientRect success', result);
  34.             this.updateInfoList(result);
  35.         } catch (err) {
  36.             console.log('getMenuButtonBoundingClientRect fail', err);
  37.         }
  38.     },
  40.     updateInfoList(res) {
  41.         let infoList = this.getData('infoList');
  42.         for (let i = 0; i < infoList.length; ++i) {
  43.             if (res[infoList[i].engName] === '') {
  44.                 infoList[i].value = '暂无';
  45.             } else {
  46.                 infoList[i].value = res[infoList[i].engName]+ "px";
  47.             }
  48.         }
  49.         this.setData('infoList', infoList);
  50.     }
  51. });

:::

代码示例2 - 应用场景

在开发者工具中预览效果

:::codeTab

  1. <view class="status-height" style="height:{{ statusHeight }}px">状态栏</view>
  2. <view class="nav-height"  style="height:{{ navHeight }}px">导航栏</view>
  1. Page({
  2.     data: {
  3.             statusHeight: 0,  //状态栏高度
  4.             navHeight: 0      //导航栏高度
  5.         },
  6.     / 
  7.      * 获取状态栏|导航栏高度,
  8.      */
  9.     onLoad (){
  10.         let capsule = swan.getMenuButtonBoundingClientRect() ; //胶囊信息
  11.         console.log(capsule)
  12.         let that = this;
  13.         swan.getSystemInfo({
  14.             success(res) {
  15.                 console.log(capsule.height + (capsule.top - res.statusBarHeight) * 2)
  16.                 that.setData({
  17.                     statusHeight: res.statusBarHeight,
  18.                     navHeight: capsule.height + (capsule.top - res.statusBarHeight) * 2 // 与res.navigationBarHeight相同
  19.                 })
  20.             }
  21.         })
  23.     }
  24. });

:::