微信小程序 iPhoneX底部安全區(qū)域（底部小黑條）適配(一分鐘解決)
更新時間：2019年10月18日 09:17:45 作者：樂呵樂呵de啦
iPhone X 對于微信小程序的tabbar來說，會被底部小黑條覆蓋，需要處理，大概思路是，得到手機型號、分別判斷樣式。這篇文章主要介紹了微信小程序 iPhoneX底部安全區(qū)域（底部小黑條）適配問題,需要的朋友可以參考下
iPhone X 對于微信小程序的tabbar來說，會被底部小黑條覆蓋，需要處理，大概思路是，得到手機型號、分別判斷樣式，即可，如下：
安全區(qū)域指的是內容可見區(qū)域（圖中藍色部分）：
處理前后效果圖：
步驟：
1.在app.js的onLaunch函數內調用wx.getSystemInfo，獲得手機型號（res.model），并存儲為全局變量：
onLaunch: function() {
let _self = this;
wx.getSystemInfo({
success: res => {
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1) {
_self.globalData.isIphoneX = true
}
wx.setStorageSync('modelmes', modelmes)
}
})
}
2.在所需頁面的js文件的onLoad函數內從全局變量里面拿出來第一步存儲的手機型號值，這里設置為isIphoneX：
onLoad: function(options)
let modelmes = wx.getStorageSync('modelmes');
let isIphoneX = app.globalData.isIphoneX;
this.setData({
isIphoneX: isIphoneX
})
}
3.在所需頁面的wxml里面根據手機型號是否為iPhone X 來運用三元運算符判斷底部的位置就可以啦：
<view class="footer" style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}};"></view>
已解決。
這是最簡單的一種方法，有其他方法等待小伙伴們探索實踐，比如可以用iOS新增的 “viewport-fit” 特性或者是 “env() 和 constant()” 特性。
總結
以上所述是小編給大家介紹的微信小程序 iPhoneX底部安全區(qū)域（底部小黑條）適配,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了VScode敲代碼時自動導入包的解決方案,文中通過圖文介紹的非常詳細,對大家學習或者使用vscode具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了大規(guī)格文件的上傳優(yōu)化，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了低版本VS項目在VS2019無法正常編譯的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了openlayers?模仿高德箭頭導航路線圖的示例代碼，主要包括原始數據、起點/終點尋找、起點和終點樣式函數，結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
進制轉換算法原理（二進制 八進制 十進制 十六進制），以前上學那會確實學過，長時間不用都忘了。2010-05-05
這篇文章主要為大家介紹了Hash算法示例應用場景解延伸探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
本文主要介紹了Git的基礎知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Chrome 調試技巧(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
接下來小編就為大家介紹一下在Zend Stdio 8.0版本中的快捷鍵匯總。需要的朋友可以過來參考下，希望對大家有所幫助2013-10-10
本文主要介紹了Git撤銷操作、刪除文件和恢復文件的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02