小程序刘海屏适配及兼容全面屏底部横条(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）