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

解决方式：底部增加 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

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

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

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

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

h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
iOS特性方法(推荐),小程序也可用 padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bott ...
自定义微信小程序tabBar，兼容iPhone异形全面屏
需求开发微信商城会员中心,tabBar有首页及用户中心,当用户没有登录时点击页面任意位置均弹出登录窗口.但是自带的微信tabBar无法被弹出的遮罩层覆盖,从而可以在两个tab之间切换. 解决自己手 ...
微信小程序button按钮无法更改尺寸解决
在微信小程序新版本中, button按钮无法支持在wxss文件中直接自定义width 和 height 解决方法有两种: 1. 推荐使用: 在根目录中的app.json文件中, 删除其中的 &q ...
小程序解决iPhone机型屏幕下边横杠遮住底部按钮问题
解决思路: 首先在app.js的onLaunch方法中获取到设备信息,根据设备信息判断设备屏幕下边是否有横杆并设置到全局变量: 在页面中获取到该变量,为true时就动态改变底部按钮高度,使按钮弹起一定 ...
微信小程序如何实现兼容----wx.getSystemInfoSync、 wx.getSystemInfo、wx.canIUse
小程序的宿主环境一直在迭代更新,提供更多的能力给开发者去完成更多的事情,所以你的小程序会运行在不同版本的宿主环境下.为了让你的小程序在不同环境下都能提供相应的服务,我们需要来了解一下在小程序中如何实现 ...
小程序“errcode“:41002错误问题如何解决？
小程序"errcode":41002错误问题如何解决? 参考文章: (1)小程序"errcode":41002错误问题如何解决? (2)https://www. ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...

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

效果图：

源码：

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

最新文章

热门文章

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

效果图：

源码：

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

最新文章

热门文章

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

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