小程序自定义底部按钮适配Iphone X

最终实现效果图：（图中提交按钮下面的绿色是为了遮盖页面超出内容，比如下图的图片和添加图片按钮就被盖住了，去掉绿色那一部分在真机上就会显示出来，很难看）

                                实现后效果图　　　　　　　　　　　　　　　　　　　　　　    

 

实现前效果图

实现思路：

　　1、在网上查找了一番，都是使用CSS的为元素::affter进行遮盖；模拟器上::affter定位之后会出现在页面顶部，真机上不显示；

　　2、之后将::affter换成::before后，模拟器上何以正常显示，但是真机上还是不显示，提交按钮下面的图片还是会显示出来；

　　3、最终更换了布局样式在button提交按钮上增加的一个view，高度为（button高度92rpx + 68rpx = 160rpx）

 Demo代码如下：

//app.js

App({
  onLaunch: function() {

    // 获取系统信息，我的简历中的底部提交按钮做适配
    wx.getSystemInfo({
      success: (res) => {
        // console.log(res)
        let modelmes = res.model; //手机品牌
        console.log('手机品牌', modelmes)
        if (modelmes.indexOf('iPhone X') != -1) {　　//XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
          this.globalData.isIpx = true
        }
      },
    })
    
    // 监听网络变化
    wx.onNetworkStatusChange(function (res) {
      console.log(res.isConnected)
      console.log(res.networkType)
      if (!res.isConnected) {
        wx.showToast({
          title: '网络链接不可用！',
          icon: 'none'
        })
      }
    })

    //检查小程序是否有新版本，有的话重新启动
    util.updateManager()

  },
  globalData: {
    isIpx: false,   //适配IPhoneX
  }
})

<!--pages/test/test.wxml-->

<!-- 底部按钮适配iPhone X -->
<view class="container">

  <view class="{{isIpx ? 'ipx_button' : ''}}">
    <view class="button {{isIpx ? 'iphonex-button' : ''}}" bindtap='savce'>保存</view>
  </view>

</view>

/* pages/test/test.wxss */
/* 公共样式可以放在app.css中 */
.container {
  height: 100%;
  width: 100%;
  /* padding-bottom: 92rpx; *//* box-sizing: border-box; */
}

/* 提交按钮 */

.button {
  width: 100%;
  height: 92rpx;
  background: #f16765;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  line-height: 90rpx;
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: 0;
  border-radius: 0;
}

/* 底部按钮适配Iphone X*/

.ipx_button {
  width: 100%;
  height: 160rpx;
  background: #fff;
  padding-bottom: 68rpx;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 888;
}

.iphonex-button {
  bottom: 68rpx !important;
}

/* 开启惯性滚动,安卓下默认就有，IOS需要开启 */
page {
  -webkit-overflow-scrolling: touch;
}

// pages/test/test.js
const app = getApp(); //获取应用实例

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isIpx: app.globalData.isIpx ? true : false, //底部按钮适配Iphone X
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})