最终实现效果图：（图中提交按钮下面的绿色是为了遮盖页面超出内容，比如下图的图片和添加图片按钮就被盖住了，去掉绿色那一部分在真机上就会显示出来，很难看）
实现后效果图
实现前效果图
实现思路：
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 })
请发表评论