uniapp獲取底部安全距離以及狀態(tài)欄高度等
工作中我們常常需要設(shè)置一些特定樣式：
- 固定底部按鈕
- 自定義頂部導(dǎo)航欄
- ……
固定底部按鈕
這里需要注意的是，真機(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è)面背景色不一致的情況；
其他
另外uniapp 還有一些其他的css 變量（詳情查看官方文檔）：
- 內(nèi)容區(qū)域距離頂部的距離：var(–window-top);
- 內(nèi)容區(qū)域距離底部的距離：var(–window-bottom);
總結(jié)
到此這篇關(guān)于uniapp獲取底部安全距離以及狀態(tài)欄高度等的文章就介紹到這了,更多相關(guān)uniapp獲取底部安全距離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ie7+背景透明文字不透明超級(jí)簡(jiǎn)單的實(shí)現(xiàn)方法
這篇文章主要介紹了ie7+背景透明文字不透明超級(jí)簡(jiǎn)單的實(shí)現(xiàn)方法，有需要的朋友可以參考一下2014-01-01
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下2016-10-10
今天小編就為大家分享一篇layui 表格的屬性的顯示轉(zhuǎn)換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法(兼容IE與FireFox)
這篇文章主要介紹了JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法,涉及javascript與iframe交互動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06
Bootstrap標(biāo)簽頁(yè)（Tab）插件切換echarts不顯示問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于Bootstrap標(biāo)簽頁(yè)（Tab）插件切換echarts不顯示問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹(shù)的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹(shù)的查找算法,結(jié)合具體實(shí)例形式分析了javascript針對(duì)二叉樹(shù)節(jié)點(diǎn)最小值、最大值的相關(guān)查找操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
javascript實(shí)現(xiàn)日歷控件(年月日關(guān)閉按鈕)
經(jīng)常使用google的朋友一定對(duì)google絢麗的日歷控件記憶猶新吧,那我們也來(lái)實(shí)現(xiàn)一個(gè),雖然功能和效果比不上,但重要的是實(shí)現(xiàn)的過(guò)程2012-12-12
這篇文章主要為大家介紹了JS中的Promise.race控制并發(fā)量的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
基于JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版羊了個(gè)羊游戲
最近羊了個(gè)羊火的不得了，這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)個(gè)網(wǎng)頁(yè)版羊了個(gè)羊游戲，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-09-09