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

时间:2024-03-17 18:02:37

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

                                实现后效果图                          

 

 

实现前效果图

实现思路:

  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 })