快捷導(dǎo)航

uniapp獲取底部安全距離以及狀態(tài)欄高度等

更新時(shí)間：2022年10月17日 16:05:06 作者：zhuangwei_8256

最近在用uniapp開(kāi)發(fā)的時(shí)候遇到了一些問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于uniapp獲取底部安全距離以及狀態(tài)欄高度等的相關(guān)資料,需要的朋友可以參考下

固定底部按鈕

這里需要注意的是，真機(jī)運(yùn)行時(shí)底部時(shí)IOS是存在安全距離的，這個(gè)時(shí)候就需要我們處理一下

.u-fixed-b {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  z-index: 50;
}

獲取上安全距離： env(safe-area-inset-top)
獲取左安全距離：env(safe-area-inset-left)
獲取右安全距離：env(safe-area-inset-right)
獲取下安全距離：env(safe-area-inset-bottom)

可以在固定底部的盒子加下內(nèi)下邊距 padding-bottom: env(safe-area-inset-bottom) 避免元素被遮擋

自定義頂部導(dǎo)航欄

自定義導(dǎo)航欄需要注意的是：頂部存在狀態(tài)欄，也就是顯示信號(hào)、時(shí)間等信息的狀態(tài)欄；

<template>
	<view class="container">
		<!-- 自定義頂部導(dǎo)航 -->
		<uni-nav-bar left-icon="left" backgroundColor="#FFFFFF" title="頂部導(dǎo)航" @clickLeft="backPage"></uni-nav-bar>
		
		<!-- 頁(yè)面內(nèi)容 -->
		<view class="page-content">
			<!-- ---------- -->
		</view>
	</view>
</template>

.container {
	background-color: #ffffff;
	height: 100%;
	padding-top: var(--status-bar-height);
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

獲取狀態(tài)欄高度：var(–status-bar-height)

可以在頁(yè)面的最外層的盒子加內(nèi)上邊距 padding-top: var(–status-bar-height)避免頂部導(dǎo)航欄與狀態(tài)欄重疊；并且需要給最外層盒子設(shè)置背景色與頁(yè)面背景色一致，不然會(huì)出現(xiàn)狀態(tài)欄的背景色和頁(yè)面背景色不一致的情況；