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 //禁用原生导航栏
}
}
顶部导航就不显示了。