很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用，实现效果如下：

一、H5、App、微信小程序的区别

1.H5：导航栏高度可以设为44px，它没有状态栏，因为H5端运行在浏览器中，浏览器已经处理了安全区；

总高度 = 44px

2.App：导航栏高度也是44px，它的状态栏高度是不一定的，每个机型的安全区是不一样尺寸，所以获取安全区高度来计算。

总高度 = 安全区高度 + 44px

3.微信小程序：导航栏高度和状态栏高度都与机型的尺寸有关，其中状态栏高度需要获取安全区高度来计算，导航栏高度需要获取小程序右上角的“胶囊”高度和top值来计算。

总高度 = 安全区高度 + 导航栏高度

导航栏高度 = 胶囊高度 + 上间距 + 下间距

上间距 = 下间距 =  胶囊.top - 状态栏高度

即：总高度 = 状态栏高度 + （胶囊高度 + （胶囊.top - 状态栏高度）*2）

二、在components中创建一个组件名称为 navbar，先展示组件完整代码

三、在页面中使用组件

1.直接使用默认样式，将和系统导航栏一致。

2.slot 替换默认的样式。

杭州市

汽车租赁

四、扩展

一开始导航栏背景是透明的，是根据页面的背景图来呈现。那么滚动的时候就不是很友好了，这时候我们可以加一个滚动阈值，让导航栏变成白色背景，文字黑色。类似如下效果：

精彩文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：