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

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

效果图:

常规效果iPhone X 效果

《小程序 底部按钮兼容 iPhone X(解决底部横杠遮挡问题)》

《小程序 底部按钮兼容 iPhone X(解决底部横杠遮挡问题)》

源码:

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

const app = getApp()

Page({
  data: {
    isIphoneX:false,
  },
  onLoad: function () {
    this.setData({
      "isIphoneX": this.isIphoneX()
    })
  },
  isIphoneX() {
    let info = wx.getSystemInfoSync();
    if (/iPhone X/i.test(info.model)) {
      return true;
    } else {
      return false;
    }
  }
})

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

作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

微信公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

更多精彩文章,请扫下方二维码关注我的公众号

《小程序 底部按钮兼容 iPhone X(解决底部横杠遮挡问题)》

    原文作者:黄河爱浪
    原文地址: https://blog.csdn.net/u013350495/article/details/94396159
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞