微信小程序-navigationStyle-适配刘海屏

解决在自定义导航栏样式navigationStyle:custom 中刘海屏显示不正常。

在没有齐刘海前写自定义导航栏样式是不会出现以下情况的:

错误

导航栏默认顶到了最头上,被遮住了一部分。

解决方法

因为刘海屏的状态栏的高度比一般手机要高,所以我取一个值来判断:

1
2
3
4
5
6
7
8
9
10
11
12
13

wx.getSystemInfo({
success (res) {
console.log(res.statusBarHeight)// 获取状态栏的高度
e.statusBarHeight <= 38
? t.setData({
headheight: 64
})
: t.setData({
headheight: 88
});
}
})

方法二:
微信小程序的状态栏是44px,直接加上状态栏的高度:

1
2
3
4
5
6
7
8
wx.getSystemInfo({
success (res) {
console.log(res.statusBarHeight)// 获取状态栏的高度
_this.setData({
headheight: res.statusBarHeight + 44
})
}
})

错误

坚持原创技术分享,您的支持将鼓励我继续创作!