小程序底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

水深无声 2021-12-18 22:23 614阅读 0赞

解决方式：底部增加 34px 的高度，使元素不被横杠遮挡。

### 效果图： ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:421px;">常规效果</td> 
   <td style="width:428px;">iPhone X 效果</td> 
  </tr> 
  <tr> 
   <td style="width:421px;"> <p style="text-align:center;"><img alt="" height="627" src="https://img-blog.csdnimg.cn/20190701163632624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=,size_16,color_FFFFFF,t_70" width="400"></p> </td> 
   <td style="width:428px;"> <p style="text-align:center;"><img alt="" height="713" src="https://img-blog.csdnimg.cn/20190701163652658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=,size_16,color_FFFFFF,t_70" width="400"></p> </td> 
  </tr> 
 </tbody> 
</table>

### 源码： ###

index.wxml

<view class="intro">
      <view>小程序 iPhone X 底部按钮兼容示例</view>
      <view>helang.love@qq.com</view>
    </view>
    <view class='btn' style='padding-bottom:{
       { isIphoneX ? 34 : 0 }}px;'>我是按钮</view>

index.wxss

.intro {
      margin: 30px;
      text-align: center;
      padding-top: 100rpx;
    }
    .btn{
      position: fixed;
      width: 100%;
      height: auto;
      line-height: 100rpx;
      text-align: center;
      background-color: #fd463e;
      color:#fff;
      left: 0;
      bottom:0;
    }

index.js

更多小程序相关文章，请阅读小编其它[小程序原创文章][Link 1]，  
文章列表地址：[https://blog.csdn.net/u013350495/article/category/7773989][Link 1]

> 作者：[黄河爱浪][Link 2] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495/article/category/7773989
[Link 2]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211219/104f49de79934efca99644f5e7755118.png