小程序根据机型设置距离底部的高度

小程序根据机型设置距离底部的高度

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>