uni-app的iPhonex底部安全區(qū)域解決方案
前言
關(guān)于這個(gè)iPhone X底部安全區(qū)域問(wèn)題，這個(gè)一直困擾了我好久，前前后后因?yàn)檫@個(gè)提交了好多次代碼也在網(wǎng)上找了好多解決方案，今天我在這兒簡(jiǎn)單總結(jié)一下，一來(lái)也方便自己以后查筆記，二來(lái)也希望方便后來(lái)人，我的終究目標(biāo)是愿世界上永遠(yuǎn)沒(méi)有難解決的bug，哈哈哈當(dāng)然是開(kāi)玩笑的，言歸正傳，下面就給大家來(lái)介紹幾種解決iPhone X底部安全區(qū)域的問(wèn)題。
方法一
mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea
"safearea": {
"background": "#CCCCCC",
"bottom": {
"offset": "auto"
}
}
//以上代碼意思設(shè)置安全區(qū)域居中，設(shè)置顏色為灰色為（#CCCCCC）方法二
或者mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea，具體代碼如下：
"safearea": {
"bottom": {
"offset": "none"
}
}
//以上代碼意思為不使用原生占位然后具體的頁(yè)面可以以如下方式配置
html部分
<view class="iphonex"></view> //該view標(biāo)簽為該頁(yè)面最大的盒子
css部分
.iphonex{
/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
/* #ifndef APP-NVUE */
margin-bottom: 0;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
/* #endif */
}或者css部分為如下代碼：
.iphonex{
/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
/* #ifndef APP-NVUE */
margin-bottom: 0;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
/* #endif */
}以上兩種CSS編寫(xiě)方式可以根據(jù)具體需求自行選擇
我們這里還可以用另一種不同的方法，來(lái)解決上述問(wèn)題：
html部分
<view>
<view class="iphonex"></view>
</view>
//帶有iPhoneX的class類(lèi)放在頁(yè)面最底部css部分
.iphonex{
/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 */
/* #ifndef APP-NVUE */
height: 0;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
width: 750rpx;
background-color: #FFFFFF;
/* #endif */
}多的我不用說(shuō)了,我就說(shuō)說(shuō)background-color,它可以配置你喜歡的顏色(主題色)相對(duì)靈活
以上就是uni-app的iPhonex底部安全區(qū)域解決方案的詳細(xì)內(nèi)容，更多關(guān)于uni-app iPhonex底部安全的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ES6中的rest參數(shù)與擴(kuò)展運(yùn)算符詳解
rest參數(shù)和擴(kuò)展運(yùn)算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴(kuò)展運(yùn)算符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Javascript腳本實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)加密實(shí)例代碼
這篇文章介紹了Javascript腳本實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)加密實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章給大家詳細(xì)介紹了JS中使用正則表達(dá)式g模式和非g模式的區(qū)別，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-04-04
短視頻(douyin)去水印工具的實(shí)現(xiàn)代碼
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來(lái)是這樣實(shí)現(xiàn)的,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
echarts整合多個(gè)類(lèi)似option的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于echarts整合多個(gè)類(lèi)似option的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能的方法,實(shí)例分析了javascript針對(duì)div層拖拽的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05
上傳前預(yù)覽使用js實(shí)現(xiàn)還是比較cool的，同時(shí)還可以兼容IE和FF的能做到這一點(diǎn)已經(jīng)相當(dāng)不容易了，下面與大家一起分享下具體的實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過(guò)了哈2013-05-05
uniapp中解析markdown支持網(wǎng)頁(yè)和小程序?qū)崿F(xiàn)示例
這篇文章主要為大家介紹了uniapp中解析markdown支持網(wǎng)頁(yè)和小程序?qū)崿F(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹(shù)實(shí)現(xiàn)方法,較為詳細(xì)的分析了二叉搜索樹(shù)的概念、原理與JavaScript實(shí)現(xiàn)二叉搜索樹(shù)的方法,對(duì)于學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
javascript實(shí)現(xiàn)控制的多級(jí)下拉菜單
這篇文章主要介紹了javascript實(shí)現(xiàn)控制的多級(jí)下拉菜單，包含示例代碼，效果非常不錯(cuò)，這里推薦給大家。2015-07-07