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
  1. <view class="wrap">
  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.chineseName}}}</view>
  5. <view class="list-item-value">{{item.value}}</view>
  6. </view>
  7. <button type="primary" bindtap="getMenuButtonBoundingClientRect">点击获取胶囊布局信息</button>
  8. </view>
  9. </view>

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <view class="status-height" style="height:{{ statusHeight }}px">状态栏</view>
  2. <view class="nav-height" style="height:{{ navHeight }}px">导航栏</view>