小程序刘海屏适配及兼容全面屏底部横条(indicator)
【摘要】
小程序适配iPhone刘海屏及indicator的方法
本文适用于未自定义导航&吸底按钮(底部按钮fixed)的情况
# 判断设备
判断方法->wx.getSystemInfo(OBJECT)返回的信息
model是否包含 iPhone XscreenHeight是否等于 812
# 代码
主要js代码
//app.jsAp...
小程序适配iPhone刘海屏及indicator的方法
本文适用于未自定义导航&吸底按钮(底部按钮fixed)的情况
# 判断设备
判断方法->wx.getSystemInfo(OBJECT)返回的信息
- model是否包含 iPhone X
- screenHeight是否等于 812
# 代码
主要js代码
//app.js
App({
// 全局数据
globalData: {
isIPX: false
},
onLaunch: function (options) {
// 判断设备是否为 iPhone X
this.checkIsIPhoneX()
},
checkIsIPhoneX: function() {
const self = this
wx.getSystemInfo({
success: function (res) {
// 根据 model 进行判断
if (res.model.search('iPhone X') != -1) {
self.globalData.isIPX = true
}
// 根据 screenHeight 进行判断
// if (res.screenHeight == 812) {
// self.globalData.isIPX = true
// }
}
})
}
})
//页面js
const app = getApp()
Page({
data: {
// 页面其他数据...
isIPX: app.globalData.isIPX,
},
...
})
样式
可以写在全局样式文件app.wxss中
.bottom-btn {
position: fixed;
bottom: 0;
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: #fff;
text-align: center;
box-shadow: 0 -4rpx 4rpx 0 rgba(0, 0, 0, 0.05);
}
.bottom-btn-ipx {
padding-bottom: 68rpx;
}
页面wxml
<view class="bottom-btn {{isIPX ? 'bottom-btn-ipx' : ''}}">
<view class="join-course" bindtap="joinCourse" data-curriculum_id="{{periodical_id}}">
{{text}}
</view>
</view>
# 参考资料
iPhone手机设备内部代号参考deviceMode
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244481
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）