// 获取设备信息
wx.getSystemInfo({
success: e => { // { statusBarHeight: 20, ... }，单位为 px
// 获取右上角胶囊的位置信息
let info = wx.getMenuButtonBoundingClientRect() // { bottom: 58, height: 32, left: 278, right: 365, top: 26, width: 87 }，单位为 px
let CustomBar = info.bottom + info.top - e.statusBarHeight
}
})
自定义导航栏的高度 = 手机状态栏高度 + 胶囊高度 + 胶囊的上下间距
胶囊的上下间距是一致的。
这个间距在不同设备上是不一样的。
上间距 = 胶囊与手机状态栏的距离。
可以通过胶囊信息的 top 值减去手机状态栏的高度，从而得出胶囊的上间距。
webwxgetmsgimg (2).jpg
自定义导航栏的高度 = 手机状态栏高度 + 胶囊高度 + 胶囊的上下间距 胶囊的上下间距是一致的。这个间距在不同设...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高 工作中开发微信小程序，在原本提供的导航栏无法满足需求的...
组件化的自定义状态栏：特性：自适应状态栏高度，不会出现太高或太低的情况，和微信自带的状态栏高度保持一致。 可以自行...
我们可以通过app.json对微信小程序进行全局配置，window用于设置小程序的状态栏、导航条、标题、窗口背景色...
问题 在微信小程序中设置自定义标题后，自定义标题并不能覆盖住canvas 原因: 小程序中 canvas、text...
微信小程序自定义model模态弹窗|actionSheet弹窗|toast自定义图标信息框 微信小程序自定义弹窗实...
1.沉浸式状态栏 获取状态栏的高度，然后把toolbar的高度加上状态栏的高度，再设置状态栏透明设置状态栏透明： ...
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switc...
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switc...
wx-gesture-lock微信小程序的手势密码 WXCustomSwitch微信小程序自定义 Switch 组...
本文标题：微信小程序自定义状态栏的高度设置
本文链接：https://www.haomeiwen.com/subject/hownrctx.html
网友评论