swan.getMenuButtonBoundingClientRect

基础库 3.20.3 开始支持，低版本需做兼容处理。 解释：获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

方法参数

无

返回参数说明

示例

扫码体验

请使用百度APP扫码

代码示例1 - 属性全集

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">          <view class="list-area border-bottom" s-for="item in infoList">            <view class="list-item-key-4">{{item.chinaName}}}</view>            <view class="list-item-value">{{item.value}}</view>        </view>                <button type="primary" bindtap="getMenuButtonBoundingClientRect">点击获取胶囊布局信息</button>    </view></view>
  1. Page({    data: {        result: '',        infoList: [{            chinaName: '高度',            engName: 'height',             value: ''        }, {            chinaName: '宽度',            engName: 'width',             value: ''        }, {            chinaName: '距下',            engName: 'bottom',             value: ''        }, {            chinaName: '距左',            engName: 'left',             value: ''        }, {            chinaName: '距右',            engName: 'right',             value: ''        }, {            chinaName: '距上',            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);    }});

代码示例2 - 应用场景

在开发者工具中预览效果

  1. <view class="status-height" style="height:{{ statusHeight }}px">状态栏</view><view class="nav-height"  style="height:{{ navHeight }}px">导航栏</view>
  1. Page({    data: {            statusHeight: 0,  //状态栏高度            navHeight: 0      //导航栏高度        },    /      * 获取状态栏|导航栏高度,     */    onLoad (){        let capsule = swan.getMenuButtonBoundingClientRect() ; //胶囊信息        console.log(capsule)        let that = this;        swan.getSystemInfo({            success(res) {                console.log(capsule.height + (capsule.top - res.statusBarHeight) * 2)                that.setData({                    statusHeight: res.statusBarHeight,                    navHeight: capsule.height + (capsule.top - res.statusBarHeight) * 2 // 与res.navigationBarHeight相同                })            }        })    }});