uniapph5页面的定位元素被原生导航栏和tabbar覆盖问题解决

最新推荐文章于 2024-05-17 07:37:21 发布

菜鸟娇嗔

最新推荐文章于 2024-05-17 07:37:21 发布

阅读量3k

点赞数 3

文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/qq_53987671/article/details/126279549

版权

一、问题演示

1-问题代码

<template>
	<view class="container">
		<view class="positionTop">顶部定位</view>
		<view class="positionBottom">底部定位</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		}
	}
</script>

<style scoped>
	.positionTop{
		height:200px;
		background-color: red;
		line-height:200px;
		text-align: center;
		position: fixed;
		top:0;
	}
	.positionBottom{
		height:200px;
		background-color: blue;
		line-height:200px;
		text-align: center;
		position: fixed;
		bottom:0;
	}
</style>

2-问题效果

2.1 小程序页面：

没有问题

2.2 h5页面：

可以看出原本垂直居中的文字分别向上和向下移动，这是因为positionTop元素被原生的导航栏覆盖了一部分，positionBottom元素被原生的tabbar覆盖了一部分。

3-解决问题

uniapp为我们内置了这三个变量

3.1 解决代码

通过将top和bottom的属性修改为uniapp提供的内置变量解决

<template>
	<view class="container">
		<view class="positionTop">顶部定位</view>
		<view class="positionBottom">底部定位</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		}
	}
</script>

<style scoped>
	.positionTop{
		height:200px;
		background-color: red;
		line-height:200px;
		text-align: center;
		position: fixed;
		/* top:0; */
		top:var(--window-top);
	}
	.positionBottom{
		height:200px;
		background-color: blue;
		line-height:200px;
		text-align: center;
		position: fixed;
		/* bottom:0; */
		bottom:var(--window-bottom)
	}
</style>