1 <!-- 小程序 在app 里面写 是否判断他是IPhone X--> 2 wx.getSystemInfo({ 3 success: function(res) { 4 if (res.model.indexOf('iPhone X') != -1) { 5 that.globalData.isIphoneX = true //不等于-1 就是---- 6 } 7 } 8 }) 9 10 globalData: { 11 12 isIphoneX: false, 13 14 }
1 //需要在页面他判断是否是Iphone X 如果在 index.js 里面写 2 const app =getApp() 3 data:{ 4 isIphoneX:false, 5 } 6 7 onl oad:function(options){ 8 const isIphone =app.globalData.isIphoneX; 9 this.setData({ 10 11 isIphoneX:isIphoneX 12 }
1 <!--给整个页面添加34px--> 2 <view class="{{isIphoneX?'iPhoneX':''}}"> 3 <!-- 这里面是存放整个页面内容--> 4 <!-- 如果底部有按钮这添加判断 增加34px--> 5 <view class="bottom-btn{{isInphoneX?"btn-iPhone":" "}}">我是底部按钮</view> 6 </view>
1 page{ 2 padding-bottom: 64px; //这里64px 是因为底部按钮40px + 加上需要适应的34px; 3 4 } 5 .iPhoneX{ 6 padding-bottom:34px; //若果是iphoneX 就离底部34px 7 8 } 9 .bottom-btn{ 10 11 position: fixed; 12 bottom: 10px; //底部距离相差10px 13 left: 50%; 14 width: 452rpx; 15 margin-left: -226rpx; 16 height: 40px; //底部按钮高40px 17 background-color: #d62017; 18 text-align: center; 19 color: #fff; 20 line-height: 40px; 21 border-radius: 20px; 22 font-size: 14px; 23 } 24 25 //在三元里面判断 如果是iPhone 26 .btn-iPhone{ 27 padding-bottom:44px important; //这里就需要加上它的底部距离10px 28 }