百度智能小程序 获取菜单按钮布局位置

swan.getMenuButtonBoundingClientRect

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

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

方法参数

无

返回参数说明

示例

代码示例 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
                })
            }
        })
    }
});