小程序中底部欄高度適配

最近接了幾個小程序，在開發過程中遇到了比較常見的兼容適配問題，特此記錄下，便於下次開發避坑；

不同機型的底部欄高度是不同的，iphoneX和XR這兩個比較特殊些，一般當前設備的具體信息 可通過  wx.getSystemInfoSync() 獲取到：

 

 

 該對象中model為設備機型，可用來判斷當前設備的具體型號；

今天要說的是設備底部的高度該怎么獲取才准確，也看了網上很多寫法，都不太符合需求，

 

 

 去結算的這一欄高度為96rpx，默認是固定定位距離底部98rpx，在真機中並不好使，會出現上浮或者下沉的現象，正確操作應為定位的bottom動態計算才行，一開始用的是

statusBarHeight這個字段來獲取，發現還是不對，正確思路應為  通過  screenHeight  - safeArea.bottom ，此時得到的bar高度為px，需要通過 750 / screenWidth 將px換算為rpx，然后加上 去結算這一塊高度96，這樣是正確的，iphoneX及XR中，由於底部欄一般約為68rpx, 所以需要在剛才基礎上單獨減去20rpx，具體代碼如下：

<view class="fixed-bar"style="bottom:{{ isIpx ? barHeight - 20 : barHeight }}rpx;"></view>

.fixed-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 98rpx; //此為默認值。可不寫
  background: #fff;
  z-index: 100;
}

//app.js中   
   var systemInfo = wx.getStorageSync("community")；　　　　
   var screenH = systemInfo.screenHeight; 

 var model = systemInfo.model;

 //判斷是否是iphoneX 
 this.globalData.isIpx = model.indexOf("iPhone X") > -1 || model.indexOf("unknown<iPhone") > -1;
 var barHeight = screenH - systemInfo.safeArea.bottom; //此時獲取的bar高度單位為px this.globalData.barHeight = barHeight * (750 / systemInfo.screenWidth ); //px轉化為rpx

//當前.js

　　onLoad: function() {

　　　　this.setData({

　　　　　　barHeight: app.globalData.barHeight + 96

　　　　})

　　}

 

如有問題，還請及時留言指正，共同學習共同進步；