uniapp 页面状态栏问题

最新推荐文章于 2024-09-26 19:58:29 发布

王山而文武

最新推荐文章于 2024-09-26 19:58:29 发布

阅读量972

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/a11979/article/details/125069604

版权

本文详细讲解了如何在Vue应用中通过JavaScript获取并适应不同设备的状态栏高度，同时针对状态栏固定带来的影响，介绍了调整导航栏的方法。通过实例演示了使用uni.getSystemInfoSync()获取statusBarHeight，并用CSS实现固定和滚动效果的兼容性处理。

摘要由CSDN通过智能技术生成

首先要知道导航栏、状态栏都是什么

如图在这里插入图片描述

1.先解决状态栏问题

<template>
	<view class="my">
		<!-- 获取状态栏高度，适配不同机型 -->
		<view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			}
		},
		onLoad() {
			// 获取高度
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.status-bar {
		width: 100%;
		// 状态栏高度固定,页面滚动效果也不会影响到状态栏显示
		position: fixed;
		top: 0;
		background: #fff;
		z-index: 999;
	}
</style>