原因：

微信小程式在適配iphone x 的時候 底部的橫線會出現遮擋如圖：

解決方案：

步驟一：在app.js檔案中 建立全域性變數，然後獲取裝置型號   globalData: {     isIphoneX: false,     userInfo: null   },   onShow:function(){     let  that = this;     wx.getSystemInfo({       success:  res=>{         // console.log('手機資訊res'+res.model)         let modelmes = res.model;         if (modelmes.search('iPhone X') != -1) {           that.globalData.isIphoneX = true         }         }     })        },

獲取的手機機型如圖：

步驟二： 在需要引用的頁面js檔案中onload方法裡獲取全域性變數

let isIphoneX = app.globalData.isIphoneX; this.setData({ isIphoneX: isIphoneX })

步驟三：在 wxml檔案中 進行css的邏輯判斷

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

步驟四：在 wxss檔案中 進行css，修改自己需要的css樣式即可

.isIPX {

      padding-bottom: 30rpx !important;

}

結果如圖：