小程序等移动端关于iphoneX iphone12 iphone Max等刘海手机底部横条适配方案

问题

吸底元素被手机底部横条覆盖,需要适配手机有iphoneX | iphone 12 | iphone XR | iphone XS | max 等等
如图：

2021-05-28_113110.png

解决思路

1. 判断该手机是否有底部横条（通过 设备安全高度 > 20 判断是否有刘海屏，有刘海屏则有底部横条）
2. 底部横条高度约等于68rpx
3. 若有底部横条则吸底高度 position: fixed; bottom: 68rpx;  

解决步骤

步骤一

在app.js 里面设置全局底部高度 globalBottom

   globalData: {
       globalBottom: 0
   }

根据安全高度判断是否有底部横条，若有底部横条则将底部高度globalBottom设置为68

onLaunch()
 {
    wx.getSystemInfo({
      success: res => {
        const patt = /ios/i
        const isIos = patt.test(res.system) //判断设备是否为苹果手机
        // 得到安全区域高度res.safeArea.top
        if (res.safeArea.top > 20 && isIos ){ //IPhoneX 等刘海手机底部横条高度大约为68rpx 
          this.globalData.globalBottom = 68
        }else{
          this.globalData.globalBottom = 0
        }
      }
    })
}

步骤二

进入小程序页面如：pages/index/index.js

var app = getApp()
data: {
    globalBottom: app.globalData.globalBottom
}

步骤三

进入小程序页面如：pages/index/index.wml

/*
**** style="bottom: {{globalBottom}}rpx" *****
*/ 
<view class="footer-nav" style="bottom: {{globalBottom}}rpx">
    <view class="btn index-btn  {{active == 0 ? 'active' : ''}}" data-path="0" bindtap="shopJump">
        <image class="icon" src="{{active == 0 ? navs[0].active : navs[0].img}}" />
        <view class="f-text">首页</view>
    </view>
    <view class="btn index-btn {{active == 1 ? 'active' : ''}}" data-path="1" bindtap="shopJump">
        <image class="icon" src="{{active == 1 ? navs[1].active : navs[1].img}}" />
        <view class="f-text">附近门店</view>
    </view>
    <view class="btn index-btn {{active == 2 ? 'active' : ''}}" data-path="2" bindtap="shopJump">
        <image class="icon" src="{{active == 2 ? navs[2].active : navs[2].img}}" />
        <view class="f-text">历史门店</view>
    </view>
    <view class="btn index-btn {{active == 3 ? 'active' : ''}}" data-path="3" bindtap="shopJump">
        <image class="icon" src="{{active == 3 ? navs[3].active : navs[3].img}}" />
        <view class="f-text">订单</view>
    </view>
</view>