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

有需求就要有解决方法

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

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

注意

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

使用

在这里插入图片描述

效果

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值