這篇文章主要介紹了微信小程式中吸底按鈕適配iPhone X方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
隨著第二三批iPhone X的陸續到貨，身邊的土豪們紛紛用了起來，因為iPhone X的齊劉海導致的適配問題很多，所以這群土豪更沉浸在各種找bug中，不出所料，豌豆公主小程序在一些地方也出現了一丟丟體驗不好的地方，主要是商品詳情頁和購物車的吸底按鈕欄，會與Home Indicator 橫條重疊，這樣在點擊下方按鈕時很容易誤觸發手勢操作，如下圖：
截圖來自網絡，侵刪
是bug就得修，是體驗問題就得優化，於是立刻搞了一台iPhone X開始研究。
網頁端的適配還好，有 viewport meta 標籤以及下面的方案進行處理。具體可參考這裡
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}但比較尷尬了，從四個角被裁掉的表現上可以推測小程式裡的viewport-fit 預設為cover （根據表現猜測），但是沒有接口去更改，所以網頁端透過viewport-fix=cover 結合constant(safe-area-inset-bottom); 的適配方案不適合小程式。目前也沒有看到小程式有對iPhone X等異形螢幕有特殊的介面或欄位。小程式本身的底部tab欄對iPhone X的適配也只是簡單的加了一個白色底欄，提高了原有tab欄的位置，為什麼這麼說呢？因為這一點可以從我們購物車頁面看出，購物車頁吸底操作並非透過position:fixed;bottom:0; 實現的，而是根據windowHeight-自身高度計算top 值，從而模擬的吸底，在小程式新版本適配iPhone X後，導致購物車底部按鈕被蓋住了一半，由此得出上面的結論。
言歸正傳，既然沒有特殊的方案獲取該值，我們只能透過wx.getSystemInfo 介面擷取裝置訊息，該介面使用方法如下：
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)
}
})其中model 便是裝置的型號等信息，如果model 中包含iPhone X ，便可認為該設備為iPhone X，我們在入口文件app.js 中去進行檢測，然在全局增加一個isIpx 字段，將結果賦予isIpx 。
在子頁面中可以讀取該值，舉個商品詳情頁的栗子：
<!-- goods.wxml -->
<view class="button-group {{isIpx?'fix-iphonex-button':''}}">这是一个吸底按钮区域</view>
// goods.js
let app = getApp();
Page({
data: {
isIpx: app.globalData.isIpx?true:false
}
})
/* app.wxss */
.fix-iphonex-button {
bottom:68rpx!important;
}
.fix-iphonex-button::after {
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}於是，一個簡單的適配iPhone X底部圓角的方案就完成了。
至於為什麼採用68rpx ，因為iPhone X和iPhone 6的螢幕寬度都是375px，小程式中750rpx = 375px = 750物理像素，結合下面兩圖能解釋原因：
截圖來自網絡，侵刪
截圖來自網絡，侵刪
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在微信小程式中有關吸底按鈕適配iPhone X（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
