小程序根據機型設置距離底部的高度

小程序根據機型設置距離底部的高度

iponeX以及iphonex以上的機型，爲全屏，並且手機底部有弧度且有操作提示按鈕，自己寫的導航欄會被遮住，所以需要判斷機型，然後根據機型做兼容處理。
小程序需要獲取系統的方法爲 wx.getSystemInfo，所需要的字段名稱爲model

// 根據
App({
 /**
  * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
  */
 onLaunch: function() {
  var that = this;
  //獲取手機型號
  wx.getSystemInfo({
   success(res) {
	 const model = res.model;
     const modelInclude = ["iPhone X", 'iPhone XR', "iPhone XS", "iPhone XS MAX"];
     var flag = false;//是否X以上機型
     for (let i = 0; i < modelInclude.length; i++) {
       //模糊判斷是否是modelInclude 中的機型,因爲真機上測試顯示的model機型信息比較長無法一一精確匹配
       if (model.indexOf(modelInclude[i]) != -1) {
         flag = true
       }
     }
     //iponeX以及iphonex以上的機型
     if (flag) {
       that.bottom = 50;
     }else{
       that.bottom = 0;
     }
   }
  });
 }
});

在頁面中JS的引用

// 獲取bottom的值
const app = getApp();
Page({
 /**
  * 頁面的初始數據
  */
 data: {
  bottom: app.bottom//將app實例中的bottom轉化爲頁面的data,即可在頁面上使用
 },
 /**
  * 生命週期函數--監聽頁面加載
  */
 onLoad: function(options) {
 },
})

頁面樣式

<view style="padding-bottom:{{bottom}}rpx;"></view>