小程序app.js文件中判斷獲取當前設備機型,如果是iphoneX系列機型,那么設計到底部時,則考慮設置底部按鈕或選項卡的margin-bottom、padding-bottom、height等,或者添加一個div來占位小黑條的位置。
1 使用wx.getSystemInfoSync()中的screenHeight和safeArea對象的bottom屬性判斷
這里使用screenHeight是獲取屏幕的高度,因為bottom是以屏幕左上角為原點開始計算的,所以需要的是屏幕高度,對比screenHeight和safeArea,如果相等則說明不需要適配,不相等則需要適配。
`const isIPhoneX = () => {
let screenHeight = wx.getSystemInfoSync().screenHeight
let bottom = wx.getSystemInfoSync().safeArea.bottom
return screenHeight !== bottom
}`
底部選項卡或吸底元素樣式判斷
<view class=" {{isIPhoneX ? 'marginB' : ''}}">底部選項卡或吸底元素</view>
而env()和constant()函數(shù)有個必要的使用前提,H5網(wǎng)頁設置viewport-fit=cover的時候才生效,小程序里的viewport-fit默認是cover
解決方案
`.detailBotoom{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
height: calc(96rpx+ constant(safe-area-inset-bottom));/// 兼容 IOS<11.2 /
height: calc(96rpx + env(safe-area-inset-bottom));/// 兼容 IOS>11.2 /
background: #fff;
border-top: 1rpx solid #eaeef1;
z-index: 99;
padding-bottom: constant(safe-area-inset-bottom);/// 兼容 IOS<11.2 /
padding-bottom: env(safe-area-inset-bottom);/// 兼容 IOS>11.2 /
}`