iphone?x及以上的異形屏top高度為44px（或以上），非異形屏為20px。
先判斷是否為異形屏，如果是，獲取到底部小黑條區(qū)域的高度。在頁(yè)面設(shè)置底邊距padding-bottom/margin-bottom，把內(nèi)容區(qū)域隔開(kāi)。
小黑條區(qū)域高度=屏幕高度-安全區(qū)域的bottom值，安全區(qū)域指的是內(nèi)容可見(jiàn)區(qū)域文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-838418.html
注意小黑條區(qū)域的高度單位是px。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-838418.html
1. 在全局app.js里，全局存儲(chǔ)一個(gè)數(shù)據(jù)
App({
globalData: {
bottomLift: 0 //蘋果X及以上的底部小黑條高度
},
onLaunch: function () {
//獲取當(dāng)前設(shè)備信息
wx.getSystemInfo({
success: res => {
// 蘋果X及以上的底部安全區(qū)域
if (res.safeArea.top > 20) {
this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
}
},
fail:err => {
console.log(err);
}
})
},
onShow: function () {
},
});2.在所需頁(yè)面的js文件獲取全局變量
const app = getApp()
Page({
data: {
bottomLift: app.globalData.bottomLift, //蘋果X及以上機(jī)型的底部安全區(qū)域高度
},
})3.在所需頁(yè)面的wxml里面使用
<view class="page" style="padding-bottom:{{bottomHeight}}px"></view>到了這里，關(guān)于微信小程序適配iphoneX，XR，12及以上，獲取底部安全區(qū)域的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
