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

这篇具有很好参考价值的文章主要介绍了在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：

H5：

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

微信小程序：

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

方法：

 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、文章来源地址https://www.toymoban.com/news/detail-752310.html

<!-- #ifdef MP-WEIXIN -->
        <view class="nav" :style="padding">
            <!-- <uni-nav-bar  left-icon="left" right-icon="cart" @clickLeft="back" title="标题" :height="barHeight + 'px'" /> -->
            <uni-nav-bar :height="barHeight + 'px'" left-icon="left" @clickLeft="back" :barWidth="barWidth + 10"
                title="信息中心" rightWidth="150rpx">
                <template v-slot:right>
                    <view class="cilck_all">
                        <text class="iconfont icon-chakanmima"></text>
                        <text class="has_read">一键已读</text>
                    </view>
                </template>
            </uni-nav-bar>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="nav">
            <uni-nav-bar left-icon="left" @clickLeft="back" title="信息中心" rightWidth="200rpx">
                <template v-slot:right>
                    <!-- <text class="iconfont icon-bianjishuru" @click="edit_department"></text> -->
                    <!-- <text class="iconfont icon-chakanmima"></text> -->
                    <view class="cilck_all">
                        <text class="iconfont icon-chakanmima"></text>
                        <text class="has_read">一键已读</text>
                    </view>
                </template>
            </uni-nav-bar>
        </view>
        <!-- #endif -->

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

到了这里，关于在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！