【uni

默认导航栏或原生导航栏是啥样的，你懂的。

但，我想给导航栏加个背景图，比如这样： 我想给导航栏背景设置成渐变，比如这样： 这时候就需要自定义导航栏。

自定义导航栏的中心思想是：

取消默认导航栏或原生导航栏有两个方式：

在 pages.json 的 globalStyle 里有个 navigationStyle 配置项，默认是default。navigationStyle=default 时，所有页面均为原生导航栏；navigationStyle=custom时，所有页面都没有原生导航栏。

在 pages.json 的 pages 配置项下每个页面均有个 navigationStyle 配置项，默认是default。navigationStyle=default 时，该页面均为原生导航栏；navigationStyle=custom时，该页面都没有原生导航栏。

取消原生导航栏后，页面顶部直通状态栏区域。 由于窗体为沉浸式，因此页面占据了状态栏位置，导致页面顶部直通状态栏区域。

注意：在微信小程序里，右上角始的胶囊按钮不受取消原生导航栏设置的影响。

自定义导航栏可以理解为出现在原生导航栏区域的页面元素。

假设要在导航栏中添加LOGO，实现如下效果：