uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)

方法一: 直接上代码: (此方法可以避免渲染时塌陷问题,无需初始设置)

uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)_第1张图片

记得在page.json文件中设置当前页面隐藏默认标题栏哦,看最后


方法二(不建议)

1.获取信息():

//获取状态栏高度(px)

this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

//获取小程序胶囊信息

this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()

如下: 

uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)_第2张图片

2.动态设置style样式:


tips: 最好定义给menuButtonInfo一个初始值,否则页面初次渲染会有跳动的情况

menuButtonInfo: {
    top: 51,
    height: 32,
}, //右侧胶囊详细信息


最后----在page.json中设置当前页面隐藏默认标题栏:

"navigationStyle": "custom",

uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)_第3张图片

这样就做到根据手机设备信息来动态设置样式啦

如图: 

uniapp 获取状态栏及小程序右侧胶囊信息(用于设置全屏小程序)_第4张图片

你可能感兴趣的:(小程序,uni-app,微信小程序)