問(wèn)題

吸底元素被手機(jī)底部橫條覆蓋,需要適配手機(jī)有iphoneX | iphone 12 | iphone XR | iphone XS | max 等等
如圖：

2021-05-28_113110.png

解決思路

1. 判斷該手機(jī)是否有底部橫條（通過(guò) 設(shè)備安全高度 > 20 判斷是否有劉海屏，有劉海屏則有底部橫條）
2. 底部橫條高度約等于68rpx
3. 若有底部橫條則吸底高度 position: fixed; bottom: 68rpx;  

解決步驟

步驟一

在app.js 里面設(shè)置全局底部高度 globalBottom

   globalData: {
       globalBottom: 0
   }

根據(jù)安全高度判斷是否有底部橫條，若有底部橫條則將底部高度globalBottom設(shè)置為68

onLaunch()
 {
    wx.getSystemInfo({
      success: res => {
        const patt = /ios/i
        const isIos = patt.test(res.system) //判斷設(shè)備是否為蘋(píng)果手機(jī)
        // 得到安全區(qū)域高度res.safeArea.top
        if (res.safeArea.top > 20 && isIos ){ //IPhoneX 等劉海手機(jī)底部橫條高度大約為68rpx 
          this.globalData.globalBottom = 68
        }else{
          this.globalData.globalBottom = 0
        }
      }
    })
}

步驟二

進(jìn)入小程序頁(yè)面如：pages/index/index.js

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

步驟三

進(jìn)入小程序頁(yè)面如：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">首頁(yè)</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">附近門(mén)店</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">歷史門(mén)店</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>