如果我们自定义底部导航，会发现底部导航会被挡住一部分，我们可以使用下面的方法来解决这个问题。
全局app.js加入判断设备是否全面屏方法：
/**
* 判断设备是否为全面屏
*/
checkFullSucreen: function () {
const self = this
wx.getSystemInfo({
success: function (res) {
console.log(res)
// 根据 屏幕高度 进行判断
if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
self.globalData.isFullSucreen = true
}
}
})
},2、在app.js中onLaunch调用方法
onLaunch() {
this.checkFullSucreen()
},3、app.js中的globalData中定义变量
globalData: {
isFullSucreen: false, // 当前设备是否为 FullSucreen
},4、在需要适应的页面data里面定义变量
var app = getApp();//获取应用实例
Page({
data: {
isFullSucreen: app.globalData.isFullSucreen ? true : false, //判断机型
}
}）5、wxml文件里加入如下判断
<view class="fixed_footer {{isFullSucreen?'fix-Full-button':''}}"></view>6、在全局wxss中加入我们的样式
/* 适配全面屏 */
.fix-Full-button {
bottom: 68rpx !important;
}
.fix-Full-button::after {
content: ' ';
position: fixed;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 68rpx !important;
width: 100%;
background: #fff;
}
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）