小程序 解决手机下面有横杠的样式适配问题

1、在app.js文件，onLaunch方法中通过 wx.getSystemInfo获取手机设备信息

//获取设备信息
wx.getSystemInfo({
   success: function (res) {
      // 有横杆的导航栏高度大于40
      if (res.safeArea.top > 40) {
         this.globalData.isIphoneX = true;
      }
   }
});

2、页面使用时候
js文件

var app = getApp();
Page({
  data: {
    isIphoneX: false,
  },
    onShow: function () {
    	this.setData({
      		isIphoneX: app.globalData.isIphoneX
    	})
    }
  })

wxml文件

<view class="{{isIphoneX?'box isIphoneX':'box'}}">
</view>

wxss文件
根据实际需求写样式就可以啦