效果：

H5：

微信小程序：

方法：

?function getWXStatusHeight() {
?? ?// 獲取距上
?? ?const barTop = wx.getSystemInfoSync().statusBarHeight
?? ?// 獲取膠囊按鈕位置信息
?? ?const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
?? ?// 獲取導(dǎo)航欄高度
?? ?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、文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-752310.html

<!-- #ifdef MP-WEIXIN -->
?? ??? ?<view class="nav" :style="padding">
?? ??? ??? ?<!-- <uni-nav-bar ?left-icon="left" right-icon="cart" @clickLeft="back" title="標(biāo)題" :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;
?? ??? ??? ?}
?? ??? ?}
?? ?}

到了這里，關(guān)于在uniapp中，微信小程序獲取膠囊的高度、寬度，且適配微信小程序、App的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！