在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App

效果：

H5：

微信小程序：

方法：

 function getWXStatusHeight() {
    // 获取距上
    const barTop = wx.getSystemInfoSync().statusBarHeight
    // 获取胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    // 获取导航栏高度
    const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
    let barWidth = menuButtonInfo.width


    return {
        barHeight,
        barTop,
        barWidth
    }

}

export {
    getWXStatusHeight
}

使用：

1、引入：

import {
        getWXStatusHeight
    } from "@/common/util.js"

2、

data() {
            return {
                // bar （title这一条） 距
                barTop: 0,
                // bar 高度， bar 是 fixed
                barHeight: 0,
                // 胶囊的宽度
                barWidth: 0,
                // 获取到的小程序中胶囊的位置信息
                // #ifdef MP-WEIXIN
                getHeight: getWXStatusHeight(),
                // #endif
                padding: {}
            }
        },

        onLoad() {
            // #ifdef MP-WEIXIN
            let obj = this.getHeight
            this.barTop = obj.barTop
            this.barHeight = obj.barHeight
            this.barWidth = obj.barWidth
            this.padding = {
                "padding-top": this.barTop + "px",

            }
            // #endif

        },

    .nav {
        /* #ifdef APP-PLUS || H5 */
        padding-top: var(--status-bar-height);
        /* #endif */
        background-color: #fff;

        .cilck_all {
            font-size: 18rpx;
            border: 1rpx solid black;
            padding: 10rpx 14rpx;
            border-radius: 30rpx;
            width: 200rpx;
            text-align: center;

            text {
                font-size: 18rpx;
            }

            .has_read {
                margin-left: 10rpx;
            }
        }
    }