uni-app 导航栏问题总结

"style": {
                "navigationBarTitleText": "首页",
                "app-plus": {
                    "titleNView": {

                        //样式均在此处设置    每个页面均支持通过配置 

titleNView:false

                           }

样式说明：

接下来就是我们最关心的 buttons

      按钮样式

      使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。

当然我们会设置最重要的还是动起来

1.在pages.json中设置按键

[code] "app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue60c",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "24px",
"float": "right"
},{
"text": "筛选",
"select":"true",
"width": "auto",
"fontSize": "28upx",
"float": "left"
}]
}
}

2.在设置了按键的页面进行调用 

[code]  onNavigationBarButtonTap: function(e) {
// console.log(e)
if (e.index == 0) {
console.log('点击扫码按钮了')
uni.navigateTo({
url: "../scan/scan-verify"
});
} else if (e.index == 1) {
console.log('点击筛选按钮了')
}

}

这样我们的导航栏就活起来了！！！！！！！！！！！！！！

接下来就是我们的搜索框了

搜索框配置

searchInput可以在titleNView的原生导航栏上放置搜索框。其宽度根据周围元素自适应。

当然 要动起来还需要我们监听的

"app-plus": {
                    "titleNView": {
                        "searchInput":{
                            "placeholder":"输入什么鬼？？？",
                            "placeholderColor":"#000"
                        }
                        
                    }

下面的搜索框的事件

 onNavigationBarSearchInputChanged(e){
            console.log(e)//e是搜索框的值
        }

常见titleNView配置代码示例

[code]{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
}, {
"path": "pages/log/log", //日志页面
"style": {
"app-plus": {
"bounce": "none", //关闭窗口回弹效果
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
}
]
}
}
}
}, {
"path": "pages/detail/detail", //详情页面
"style": {
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"//透明渐变导航栏
}
}
}
}, {
"path": "pages/search/search", //搜索页面
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",//透明渐变导航栏
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px", //输入框圆角
"placeholder": "请输入搜索内容",
"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
}
}
}
}
}
...
]
}