小程序自定义底部按钮适配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
  },


})

小程序适配iPhoneX底部按钮还有一种方法就是封装成公共组件（以下是封装的组件）：

组件代码：

1 <!--components/my-tab/my-tab.wxml  组件wxml页面-->
2 <view class="{{isIpx ? 'ipx_button' : ''}}">
3   <view class="my_button {{isIpx ? 'iphonex-button' : ''}}" bindtap="mytab">{{text}}</view>
4 </view>

 1 /* components/my-tab/my-tab.wxss */
 2 
 3 /* 正常手机按钮 */
 4 
 5 .my_button {
 6   width: 100%;
 7   height: 92rpx;
 8   background: #f16765;
 9   text-align: center;
10   font-size: 28rpx;
11   color: #fff;
12   line-height: 92rpx;
13   position: fixed;
14   left: 0;
15   bottom: 0;
16   z-index: 999;
17 }
18 
19 /* iphone X按钮 */
20 
21 .ipx_button {
22   width: 100%;
23   height: 160rpx;
24   background: #fff;
25   padding-bottom: 68rpx;
26   box-sizing: border-box;
27   position: fixed;
28   left: 0;
29   bottom: 0;
30   z-index: 888;
31 }
32 
33 .iphonex-button {
34   bottom: 68rpx !important;
35 }

 1 // components/my-tab/my-tab.js
 2 const app = getApp();
 3 
 4 Component({
 5 
 6   // 组件的属性列表
 7   properties: {
 8     text: String
 9   },
10 
11   data: {   // 私有数据，可用于模板渲染
12     isIpx: app.globalData.isIpx ? true : false, //底部按钮适配Iphone X
13   }, 
14 
15   methods: {
16     // 点击事件,注意大小写
17     mytab(e) {
18       var isIpx = app.globalData.isIpx;
19       // 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
20       var myEventDetail = { isIpx }; // detail对象，提供给事件监听函数
21       var myEventOption = {}; // 触发事件的选项
22       this.triggerEvent('mytab', myEventDetail, myEventOption)
23     },
24   }
25 
26 })

app.js页面：

 //app.js
1 App({
 2   onLaunch: function () {
 3     // 获取系统信息
 4     wx.getSystemInfo({
 5       success: (res) => {
 6         // console.log(res)
 7         let modelmes = res.model; //手机品牌
 8         console.log('手机品牌', modelmes)
 9         //其实后面关于XS、XR、XS MAX的判断都可以去掉,因为他们里面都包含了'iPhone X'这个字符;
10         if (modelmes.indexOf('iPhone X') != -1) {
11           this.globalData.isIpx = true
12         } else if (modelmes.indexOf('iPhone XS') != -1) {
13           this.globalData.isIpx = true
14         } else if (modelmes.indexOf('iPhone XR') != -1) {
15           this.globalData.isIpx = true
16         } else if (modelmes.indexOf('iPhone XS Max') != -1) {
17           this.globalData.isIpx = true
18         } else if (modelmes.indexOf('iPhone 11') != -1) {
19           this.globalData.isIpx = true
20         } else if (modelmes.indexOf('iPhone 11 Pro') != -1) {
21           this.globalData.isIpx = true
22         } else if (modelmes.indexOf('iPhone 11 Pro Max') != -1) {
23           this.globalData.isIpx = true
24         }
25       },
26     })
27   },
28   globalData: {
29     isIpx: false,   //适配IPhoneX
30   }
31 })

app.wxss页面：

1 /* 页面底部padding,防止苹果全面屏手机底部横条遮挡页面内容 */
2 .padding_bottom_x {
3   padding-bottom: 160rpx !important;
4 }

想要使用组件需要在app.json或者页面json中添加"usingComponents"属性，否则组件引用无效

 1 //app.json页面
 2 {
 3   "pages": [
 4     "pages/test/test"
 5   ],
 6   "window": {
 7     "backgroundTextStyle": "light",
 8     "navigationBarBackgroundColor": "#F8F8F8",
 9     "navigationBarTitleText": "cover-view",
10     "navigationBarTextStyle": "black"
11   },
12   "usingComponents": {
13     "my-tab": "components/my-tab/my-tab"
14   },
15   "sitemapLocation": "sitemap.json"
16 }

接下来是需要引入组件的页面：

1 <!--pages/test/test.wxml-->
2 <!-- 如果是iphone X，页面padding-bottom不能是正常按钮高度了 -->
3 <view class="container {{isIpx ? 'padding_bottom_x' : ''}}">
4 
5   <view style="font-size:28rpx;">粉色背景部分是页面内容</view>
6   <!-- 引用封装的底部按钮组件 -->
7   <my-tab text="保存" bind:mytab="save" />
8 
9 </view>

1 /* pages/test/test.wxss */
2 page {
3   background: pink;
4 }
5 
6 .container {
7   padding-bottom: 92rpx;
8 }

 1 // pages/test/test.js
 2 const app = getApp(); //获取应用实例
 3 var btn_flag = false; //阻止按钮连续点击,出现多个弹窗
 4 
 5 Page({
 6 
 7   /**
 8    * 页面的初始数据
 9    */
10   data: {
11     isIpx: app.globalData.isIpx ? true : false, //适配iphone X
12   },
13 
14   /**
15    * 保存
16    * btn_flag:阻止出现多个弹窗,真机上快速点击的时候，如果不阻止会出现多个弹窗
17    */
18 
19   save() {
20     if (btn_flag) {
21       return false;
22     }
23     btn_flag = true;
24     wx.showModal({
25       title: '提示',
26       content: '是否保存？',
27       success: res => {
28         btn_flag = false; //可以再次点击
29         if (res.confirm) {
30           wx.showToast({
31             title: '点击了确定',
32           })
33         } else {
34           wx.showToast({
35             title: '点击了取消',
36           })
37         }
38       }
39     })
40   },
41 
42 })