WeChat applet - obtain device information, status bar/navigation bar/content/tabBar height setting

Show results

 code display

<template>
	<view>
		<view class="d-flex a-center j-center bg-blue" :style="{height:statusBarHeight+'rpx'}">状态栏</view>
		<view class="d-flex a-center j-center bg-green" :style="{height:navigationHeight+'rpx'}">导航栏</view>
		<view class="d-flex a-center j-center bg-pink" :style="{height:myTabBarHeight+'rpx'}">内容</view>
		<view class="d-flex a-center j-center bg-gray":style="{height:tabBarHeight+'rpx'}">tabBar</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myTabBarHeight: this.$store.state.GetSystemInfo.myTabBarHeight, // 页面高度
				statusBarHeight: this.$store.state.GetSystemInfo.statusBarHeight, // 状态栏高度
				navigationHeight: this.$store.state.GetSystemInfo.navigationHeight, // 状态栏高度
				tabBarHeight: this.$store.state.GetSystemInfo.tabBarHeight, // tabBar高度
			};
		}
	}
</script>

<style lang="scss">

</style>

import MUTATION from "./mutations-type.js"
import mixin from '../../uitls/mixin.js'
const GetSystemInfo = {
	namespaced: true,
	_name: 'GetSystemInfo',
	state: {
		statusBarHeight: 0, // 状态栏高度
		navigationBarHeight: 0,
		navHeight: 0,
		screentHeight: 0, // 屏幕高度
		navigationHeight: 0, // 导航栏的高度
		windowHeight: 0, // 当前机型-window高度
		windowWidth: 0, // 当前机型-window宽度
		scaleFactor: 0, // 机型适配比例系数
		menuButtonLeft: 0, // 胶囊左边界的坐标
		myPageHeight: 0, // 使用-自定义导航栏-页面高度
		myTabBarPageHeight: 0, // 使用-自定义导航栏-tabBar页面高度
		sysPageHeight: 0, // 使用-系统自带导航栏-页面高度
		sysTabBarPageHeight: 0, // 使用-系统自带导航栏-tabBar页面高度
		tabBarHeight: 0, // 底部tabBar的高度
	},
	actions: {
		// 获取借调记录列表
		async getInfo({
			commit
		}) {
			commit(MUTATION.GET_INFO)
		},
	},
	mutations: {
		[MUTATION.GET_INFO](state) {
			// 设备系统信息
			let systemInfomations = uni.getSystemInfoSync()
			console.log(systemInfomations);
			// 机型适配比例系数
			state.scaleFactor = 750 / systemInfomations.windowWidth
			// 当前机型-window高度
			state.windowHeight = systemInfomations.windowHeight * state.scaleFactor //rpx
			// 当前机型-window宽度
			state.windowWidth = systemInfomations.windowWidth * state.scaleFactor //rpx
			// 屏幕的高度
			state.screentHeight = systemInfomations.screenHeight * state.scaleFactor //rpx
			// 导航栏的高度
			state.navigationHeight = 44 * state.scaleFactor //rpx
			// 状态栏高度
			state.statusBarHeight = (systemInfomations.statusBarHeight) * state.scaleFactor //rpx
			// 底部tabBar的高度
			state.tabBarHeight = Math.abs(state.screentHeight - state.statusBarHeight - state.navigationHeight - state.windowHeight)
			// 使用自定义导航栏页面高度
			state.myPageHeight = state.windowHeight - state.statusBarHeight - state.navigationHeight
			state.myTabBarPageHeight = state.windowHeight - state.statusBarHeight - state.navigationHeight - state.tabBarHeight
			// 使用系统自带导航栏页面高度
			state.sysPageHeight = state.windowHeight + state.tabBarHeight
			state.sysTabBarPageHeight = state.windowHeight

			

			// 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度

			/****************** 微信小程序头部胶囊信息 ********************/
			// #ifdef MP-WEIXIN
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			// 胶囊高度
			let menuButtonHeight = menuButtonInfo.height * state.scaleFactor //rpx
			// 胶囊宽度
			let menuButtonWidth = menuButtonInfo.width * state.scaleFactor //rpx
			// 胶囊上边界的坐标
			let menuButtonTop = menuButtonInfo.top * state.scaleFactor //rpx
			// 胶囊右边界的坐标
			let menuButtonRight = menuButtonInfo.right * state.scaleFactor //rpx
			// 胶囊下边界的坐标
			let menuButtonBottom = menuButtonInfo.bottom * state.scaleFactor //rpx
			// 胶囊左边界的坐标
			state.menuButtonLeft = menuButtonInfo.left * state.scaleFactor //rpx
			
			// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			// state.navHeight = menuButtonHeight + (menuButtonTop - state.statusBarHeight) * 2
			
			
			// #endif
			console.log(state);
		}
	},
	...mixin
}

export default GetSystemInfo