Uniapp零基础开发学习笔记(4) -顶部导航栏titleNView的制作

原创

已于 2022-10-22 18:32:59 修改 · 9.5k 阅读

标签

#uni-app #学习 #前端

于 2022-10-21 12:00:00 首次发布

本文介绍了如何在uni-app中使用titleNView创建原生导航栏，强调了原生导航的性能优势，并展示了添加搜索框、按钮组的步骤。同时，详细解释了事件响应`onNavigationBarButtonTap`和`onNavigationBarSearchInputChanged`的实现，以及如何隐藏导航栏。通过实例代码和测试结果，帮助开发者理解uni-app的顶部导航栏配置与交互处理。

Uniapp零基础开发学习笔记(4) -顶部导航栏titleNView的制作

制作顶部导航栏titleNView的过程。

1.官网上关于顶部导航栏的介绍

https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview
其中关于顶部导航栏的介绍中，有如下的说明：

前端组件在渲染速度上不如原生导航栏，原生导航可以在动画期间渲染，保证动画期间不白屏，但使用前端导航栏，在新窗体进入的动画期间可能会整页白屏，越低端的手机越明显。
以上讨论的是前端自定义导航栏，但在App侧，原生导航栏也提供了比小程序导航更丰富的自定义性
titleNView：给原生导航栏提供更多配置，包括自定义按钮、滚动渐变效果、搜索框等，详见titleNView
subNVue：使用nvue原生渲染，所有布局自己开发，具备一切自定义灵活度。详见subNVue
页面禁用原生导航栏后，想要改变状态栏的前景字体样式，仍可设置页面的 navigationBarTextStyle 属性（只能设置为 black或white）。
如果想单独设置状态栏颜色，App端可使用plus.navigator.setStatusBarStyle (opens new window)设置。注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。
鉴于以上问题，在原生导航能解决业务需求的情况下，尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。在App和H5下，uni-app提供了灵活的处理方案：titleNView、subNVue、或整页使用nvue。但在小程序下，因为其自身的限制，没有太好的方案。有必要的话，也可以用条件编译分端处理。

根据这个介绍,就是说尽量采用原生的顶部导航栏定义，速度兼容性都会比较好。