记自定义微信小程序顶部导航栏

有需求就要有解决方法

如何让自定义导航栏兼容所有机型,一定要拿到statusBarHeight(顶部的状态高度)
怎么拿?
在这里插入图片描述

状态栏的高度:
在这里插入图片描述
在它的下面才能写我们自定义的导航栏,这样所有机型都适用,不会被挡住。

注意

  1. 在哪个页面自定义顶部导航栏,就要对应的自己再写一个,小胶囊会保留,返回按钮要自己加即wx.navigateBack({delta: 1})就行
  2. 最好用固定布局fixed不然有可能导航栏会随着页面进行滚动,这样不彳亍
  3. 用了自定义导航栏的页面,其返回的可用高度windowHeight是不包含状态栏高度的statusBarHeight一些地方是需要计算页面高度的

使用

在这里插入图片描述

效果

圈的这部分就是导航栏
在这里插入图片描述
还可以用图片,想要多高就给他多高
在这里插入图片描述


版权声明:本文为usernotdefined原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。