小程序iPhonex适配

Posted 2022-04-23 yuanxiangguang

 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 onload: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-btnisInphoneX?"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