一,包括状态栏设置背景图及刘海屏的处理:
(1)app.js中获取状态栏高度wx.getSystemInfoSync()[‘statusBarHeight’]方便全局使用
(2)使用背景页面的json配置"navigationStyle": “custom”,
(3)页面和刘海屏处理的样式也给大家贴出来:
/wxml/
<view class="topbar" style="padding-top:{{statusBarHeight}}px">
<image class='bg' src="../../image/xxx.png"></image>
</view>
/wxss/
.topbar {
width: 100%;
height: 460rpx;
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
二,获取手机的屏幕或设置满屏显示
页面xxx.js
onLoad: function (options) {
// 设置满屏显示
//this.setData({
// infowidth: 100vw //宽度撑满屏幕可视区域
// infoHeight: 100vh //高度撑满屏幕可视区域
// })
// 或者获取当前手机屏幕宽高
wx.getSystemInfo({
success: function (res) {
// 获取设备宽度和高度
let infoWidth = res.screenWidth;
let infoHeight = res.screenHeight;
console.log(infoWidth, infoHeight)
}
})
//又或许你有根据手机屏幕让图片等比例显示的需求可以看这里
wx.getSystemInfo({
success: function (res) {
let bili = 4 / 3;
// 图片高度
let $height = infoWidth / bili;
this.setData({
imgheight: $height, //图片高度
imgwidth:infoWidth,//图片宽度
})
}
})
},
希望我的小分享能帮助到遇到这些问题的人,来了就点个赞呗~