后浪云百度小程序教程：swan.getMenuButtonBoundingClientRect

后浪云

2022-4-26

小程序

swan.getMenuButtonBoundingClientRect
- 方法参数
  - 返回参数说明
- 示例
  - 代码示例 1：属性全集
  - 代码示例 2：自定义导航栏

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：属性全集

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
  <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>

代码示例 2：自定义导航栏

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
  <view class="status-height" style="height:{{ statusHeight }}px">状态栏</view>
  
  
  <view class="nav-height" style="height:{{ navHeight }}px">导航栏</view>

作者：后浪云

链接：https://www.idc.net/help/186673/

文章版权归作者所有，未经允许请勿转载。

THE END