效果展示

?代碼展示文章來源地址http://www.zghlxwxcb.cn/news/detail-506501.html

<template>
	<view>
		<view class="d-flex a-center j-center bg-blue" :style="{height:statusBarHeight+'rpx'}">狀態(tài)欄</view>
		<view class="d-flex a-center j-center bg-green" :style="{height:navigationHeight+'rpx'}">導(dǎo)航欄</view>
		<view class="d-flex a-center j-center bg-pink" :style="{height:myTabBarHeight+'rpx'}">內(nèi)容</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, // 狀態(tài)欄高度
				navigationHeight: this.$store.state.GetSystemInfo.navigationHeight, // 狀態(tài)欄高度
				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, // 狀態(tài)欄高度
		navigationBarHeight: 0,
		navHeight: 0,
		screentHeight: 0, // 屏幕高度
		navigationHeight: 0, // 導(dǎo)航欄的高度
		windowHeight: 0, // 當(dāng)前機型-window高度
		windowWidth: 0, // 當(dāng)前機型-window寬度
		scaleFactor: 0, // 機型適配比例系數(shù)
		menuButtonLeft: 0, // 膠囊左邊界的坐標(biāo)
		myPageHeight: 0, // 使用-自定義導(dǎo)航欄-頁面高度
		myTabBarPageHeight: 0, // 使用-自定義導(dǎo)航欄-tabBar頁面高度
		sysPageHeight: 0, // 使用-系統(tǒng)自帶導(dǎo)航欄-頁面高度
		sysTabBarPageHeight: 0, // 使用-系統(tǒng)自帶導(dǎo)航欄-tabBar頁面高度
		tabBarHeight: 0, // 底部tabBar的高度
	},
	actions: {
		// 獲取借調(diào)記錄列表
		async getInfo({
			commit
		}) {
			commit(MUTATION.GET_INFO)
		},
	},
	mutations: {
		[MUTATION.GET_INFO](state) {
			// 設(shè)備系統(tǒng)信息
			let systemInfomations = uni.getSystemInfoSync()
			console.log(systemInfomations);
			// 機型適配比例系數(shù)
			state.scaleFactor = 750 / systemInfomations.windowWidth
			// 當(dāng)前機型-window高度
			state.windowHeight = systemInfomations.windowHeight * state.scaleFactor //rpx
			// 當(dāng)前機型-window寬度
			state.windowWidth = systemInfomations.windowWidth * state.scaleFactor //rpx
			// 屏幕的高度
			state.screentHeight = systemInfomations.screenHeight * state.scaleFactor //rpx
			// 導(dǎo)航欄的高度
			state.navigationHeight = 44 * state.scaleFactor //rpx
			// 狀態(tài)欄高度
			state.statusBarHeight = (systemInfomations.statusBarHeight) * state.scaleFactor //rpx
			// 底部tabBar的高度
			state.tabBarHeight = Math.abs(state.screentHeight - state.statusBarHeight - state.navigationHeight - state.windowHeight)
			// 使用自定義導(dǎo)航欄頁面高度
			state.myPageHeight = state.windowHeight - state.statusBarHeight - state.navigationHeight
			state.myTabBarPageHeight = state.windowHeight - state.statusBarHeight - state.navigationHeight - state.tabBarHeight
			// 使用系統(tǒng)自帶導(dǎo)航欄頁面高度
			state.sysPageHeight = state.windowHeight + state.tabBarHeight
			state.sysTabBarPageHeight = state.windowHeight

			

			// 導(dǎo)航欄高度  注意：此導(dǎo)航欄高度只針對微信小程序有效 其他平臺如自定義導(dǎo)航欄請使用：狀態(tài)欄高度+自定義文本高度

			/****************** 微信小程序頭部膠囊信息 ********************/
			// #ifdef MP-WEIXIN
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			// 膠囊高度
			let menuButtonHeight = menuButtonInfo.height * state.scaleFactor //rpx
			// 膠囊寬度
			let menuButtonWidth = menuButtonInfo.width * state.scaleFactor //rpx
			// 膠囊上邊界的坐標(biāo)
			let menuButtonTop = menuButtonInfo.top * state.scaleFactor //rpx
			// 膠囊右邊界的坐標(biāo)
			let menuButtonRight = menuButtonInfo.right * state.scaleFactor //rpx
			// 膠囊下邊界的坐標(biāo)
			let menuButtonBottom = menuButtonInfo.bottom * state.scaleFactor //rpx
			// 膠囊左邊界的坐標(biāo)
			state.menuButtonLeft = menuButtonInfo.left * state.scaleFactor //rpx
			
			// 微信小程序中導(dǎo)航欄高度 = 膠囊高度 + (頂部距離 - 狀態(tài)欄高度) * 2
			// state.navHeight = menuButtonHeight + (menuButtonTop - state.statusBarHeight) * 2
			
			
			// #endif
			console.log(state);
		}
	},
	...mixin
}

export default GetSystemInfo

到了這里，關(guān)于微信小程序-獲取設(shè)備信息，狀態(tài)欄/導(dǎo)航欄/內(nèi)容/tabBar高度設(shè)置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！