微信小程序-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
    })
  }
})

错误