小程序学习08—— 系统参数获取和navBar组件样式动态设置

news2025/1/8 7:52:31

一系统信息的概念

uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。

success 返回参数说明：

参数分类	说明
statusBarHeight	手机状态栏的高度
system	操作系统名称及版本
。。。

二自定义navbar

2.1 获取系统参数

代码展示：

<template>
	<view class="nav"> <!-- 我是子组件 -->
		<view></view>   <!-- 状态栏 -->
		<view class="navbar"></view>  <!-- 内容区域 -->
	</view>
</template>

<script setup>
	import { onBeforeMount } from 'vue'
	onBeforeMount(() => {       //生命周期-页面渲染（加载）之前
		setNavSize()
	})
	
	//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件
	const setNavSize = () => {
			const res = uni.getSystemInfoSync()
				console.log(res)
		}

</script>

<style>
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2; 
	}
</style>

返回结果：

2.2 尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。一般默认将按照 375px 的屏幕宽度进行计算。

2.3 完整代码

<template>
	<view class="nav"> <!-- 我是子组件 -->
		<view :style="'height:' + status + 'rpx;' + containerStyle"></view>   <!-- 状态栏 动态样式v-bind style -->
		<view class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle"></view>  <!-- 内容区域 -->
	</view>
</template>

<script setup>
	import { ref, onBeforeMount, defineProps } from 'vue'
	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(120, 60, 30, 1)'
		},
		color: {
			type: String,
			default: 'rgba(111, 111, 111, 1)'
		},
		fontSize: {
			type: String,
			default: 32
		},
		iconWidth: {
			type: String,
			default: 116
		},
		iconHeight: {
			type: String,
			default: 38
		},
	})
	
	
	onBeforeMount(() => {       //生命周期-页面渲染（加载）之前
		setNavSize()
		setStyle()
	})
	
	//利用ref,创建响应式变量
	//状态栏高度(默认值为0)
	const status = ref(0)
	//内容高度
	const navHeight = ref(0)
	//背景颜色
	const containerStyle = ref('')
	//字体样式
	const textStyle = ref('')
	//图标样式
	const iconStyle = ref('')
	
	//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件
	//创建方法
	const setNavSize = () => {
			const { system, statusBarHeight } = uni.getSystemInfoSync()
			status.value = statusBarHeight * 2   //系统给到的数值以px为单位，转换为rpx需*2
			const isiOS = system.indexOf('iOS')   //判断是否iOS系统
			if (!isiOS) {
				navHeight.value = 96
			} else {
				navHeight.value = 88  //如果iOS,考虑顶部刘海
			}
				//console.log(res)
		}
		//样式设置(使用数组方式写出->数组转字符串->.join进行拼接)
		const setStyle = () => {
			containerStyle.value = ['background:' + props.background].join(';')
			textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
			iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';')
		}

</script>

<style>
	.nav {
		position: fixed;   //固定定位（注释需删除，以防报错）
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;     //层级(避免遮挡)
	}
</style>

运行结果：