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

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。但在小程序下，因为其自身的限制，没有太好的方案。有必要的话，也可以用条件编译分端处理。

根据这个介绍,就是说尽量采用原生的顶部导航栏定义，速度兼容性都会比较好。
将官方的示例代码复制到项目的pages.json中。

2.添加顶部导航栏包括按钮组和搜索框

在pages.json中首页index页面的style中加入顶部导航栏的定义代码，是从官方网站复制来的。

"app-plus": {
        "titleNView":{
                //搜索框
                //"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
                "searchInput":{
                    "align":"center",
                    "backgroundColor":"#ccc",
                    "borderRadius":"6px",//输入框圆角
                    "placeholder":"搜索应用",
                    "placeholderColor":"#fff",
                    "disabled":false//disable时点击输入框不置焦，可以跳到新页面搜索
                },
                // 左右按钮配置
                "buttons":[
                // 左边按钮
                    {
                        "color":"#ff9619", // 图标默认展时的颜色
                        "colorPressed":"#000", //图标按下的时候的颜色
                        "float":"left",
                        "fontSize":"30px",//按钮上文字的大小
                        "fontSrc":"/static/uni.ttf", //按钮的图片来源
                        "text":"\ue500" //按钮的unicode代码
                        
                    },
                // 右边按钮
                    {
                        "color":"#000000",
                        "colorPressed":"#000",
                        "float":"right",
                        "fontSize":"30px",//按钮上文字的大小
                        "fontSrc":"/static/uni.ttf",
                        "text":"\ue100"
                    }
                ]
                // 返回
                    // "backButton": { //自定义 backButton
                    //     "background": "#00FF00"}
        }
    }

按钮的type属性指定为下面列表中除了none之外的，会忽略自定义的属性显示内容。

比如右边的按钮可以这么定义：

// 右边按钮
{
            "color":"#000000",
            "colorPressed":"#000",
            "float":"right",
            "fontSize":"30px",//按钮上文字的大小
            // "fontSrc":"/static/uni.ttf",
            // "text":"\ue100",
            "type": "favorite"//使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性    
        }

完成之后的显示效果：

3.添加响应事件并进行测试

由于这个导航栏放在了首页index.vue，因此要到index.vue中填写事件的响应代码。
有两个事件：
onNavigationBarButtonTap：顶部导航栏按钮被点击
onNavigationBarSearchInputChanged：顶部搜索框输入改变

按照说明，这两个事件级别与启动监听onload()同级，于是就在index.vue
中的

<script></script>

标签中的onload()事件下面添加两个事件响应
其中onNavigationBarButtonTap通过返回的e.index判断点击的是哪一个按钮,
index是按钮的序号从0开始，因此0为左，1为右
onNavigationBarSearchInputChanged通过返回的e.text获取输入的搜索字符串

onNavigationBarButtonTap(e) {
            console.log(e)
            
            var buttonName = ""
            if (e.index=="0")buttonName="左";
            else if (e.index=="1")buttonName="右";
            console.log("你点击了"+buttonName+"侧按钮")
        },
        onNavigationBarSearchInputChanged(e) {
            console.log(e)
            console.log("你搜索了"+e.text)
        },

编译后测试，查看响应的记录：
你搜索了taobao at pages/index/index.vue:34
[object] {“text”:“taobao”} at pages/index/index.vue:33
你点击了左侧按钮 at pages/index/index.vue:30
[object] {“color”:“#ff9619”,“colorPressed”:“#000”,“float”:“left”,“fontFamily”:“font1666282223265”,“fontSize”:“30px”…} at pages/index/index.vue:24
你点击了右侧按钮 at pages/index/index.vue:30
[object] {“color”:“#000000”,“colorPressed”:“#000”,“float”:“right”,“fontSize”:“30px”,“fontWeight”:“normal”,“index”:1…} at pages/index/index.vue:24

4.隐藏导航栏

如果页面定义了顶部导航栏又不希望显示，
只需要在pages.json的页面style定义里添加禁止显示的代码即可：

"style": {
        "navigationBarTitleText": "我的",
            "app-plus": {
                        "titleNView": false //禁用原生导航栏
                            }
        }

顶部导航就不显示了。