目录

Uni-App,解决微信小程序和H5自定义状态栏兼容问题

JAY.LIN 收录于未分类

2022-02-20 约 200 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=123031630

目录

Uni-App，解决微信小程序和H5自定义状态栏兼容问题

脚本部分：

在微信小程序中最主要的两个接口：uni.getSystemInfoSync()和uni.getMenuButtonBoundingClientRect()

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN  //判断只有在微信小程序中执行
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			console.log("N",systemInfo.statusBarHeight)
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = (menuButtonInfo.top - this.statusBarHeight)  + menuButtonInfo.height + systemInfo.statusBarHeight
			// #endif
			console.log("S",menuButtonInfo.top ,menuButtonInfo.height)
			console.log('M',this.statusBarHeight)
			// #endif  //结束
		},
	}

HTML部分:

<view class="status_bar" :style="{height:statusBarHeight+'px'}">
		          <!-- 这里是状态栏 -->
</view>
<uni-nav-bar class="navbar" title="***" leftIcon="back" rightText="***"></uni-nav-bar>