微信小程式中吸底按鈕適配iPhone X方案，小程式iphone

小程式中吸底按鈕適配iPhone X方案，小程式iphone

隨著第二三批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.jslet 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方案，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！