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

最新推荐文章于 2024-08-07 22:38:02 发布

黄河爱浪

最新推荐文章于 2024-08-07 22:38:02 发布

阅读量1w

点赞数 3

分类专栏：小程序文章标签：底部按钮兼容 iPhone X

本文链接：https://blog.csdn.net/u013350495/article/details/94396159

版权

小程序专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

效果图：

常规效果	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