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"}
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

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

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

完成之后的显示效果：

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

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

按照说明，这两个事件级别与启动监听onload()同级，于是就在index.vue
中的标签中的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)
		},
1
2
3
4
5
6
7
8
9
10
11
12

编译后测试，查看响应的记录：
你搜索了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 //禁用原生导航栏
							}
		}
1
2
3
4
5
6

顶部导航就不显示了。