小程序iPhonex适配

最新推荐文章于 2024-06-14 16:57:03 发布

xxpr_ybgg

最新推荐文章于 2024-06-14 16:57:03 发布

阅读量437

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/xxpr_ybgg/article/details/127599436

版权

 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-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  bottom:44px !important; //这里就需要加上它的底部距离10px
28 }