首先通過wx.getSystemInfo獲取設(shè)備信息宇攻，代碼中的model就是設(shè)備的型號(hào)信息汇跨，如果model中包含Ipx舔庶，我們就認(rèn)為該設(shè)備就是Iphone X姜贡，我們?cè)赼pp.js文件進(jìn)行檢測(cè)倘待，在全局添加一個(gè)isIpx的字段令漂，再將結(jié)果賦予isIpx膝昆，再通過wxml讀取這個(gè)數(shù)值，最后再來定義wxss叠必，通過荚孵！important提高底部欄的高度，這樣就能實(shí)現(xiàn)一個(gè)吸底按鈕的適配效果纬朝。
1收叶、wx.getSystemInfo獲取設(shè)備信息
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
2、wxml文件
<view class="button-group {{isIpx?'fix-iphonex-button':''}}"> 這是一個(gè)吸底按鈕區(qū)域</view>
3共苛、js 文件
let app = getApp();
Page({
data: {
isIpx: app.globalData.isIpx ? ture : false
}
})
4判没、wxss文件
.fix-iphonex-button {
bottom: 68rpx!important;
}
.fix-iphonex-button::after {
content: '';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}
