最終實現效果圖：（圖中提交按鈕下面的綠色是為了遮蓋頁面超出內容，比如下圖的圖片和添加圖片按鈕就被蓋住了，去掉綠色那一部分在真機上就會顯示出來，很難看）
實現后效果圖
實現前效果圖
實現思路：
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 })