uni-app 导航栏问题总结

 

 

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

                        //样式均在此处设置    每个页面均支持通过配置 titleNView:false 来禁用原生导航栏

                           }

样式说明：

属性	类型	默认值	描述	最低版本
backgroundColor	String	#F7F7F7	背景颜色，颜色值格式为"#RRGGBB"。
buttons	Array		自定义按钮，详见 buttons
titleColor	String	#000000	标题文字颜色
titleOverflow	String	ellipsis	标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪；"ellipsis"-超出显示区域时尾部显示省略标记（...）。
titleText	String		标题文字内容
titleSize	String		标题文字字体大小
type	String	default	导航栏样式。"default"-默认样式；"transparent"-透明渐变。
tags	Array		原生 View 增强，详见：5+ View 控件
searchInput	Object		原生导航栏上的搜索框配置，详见：searchInput	1.6.0

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

属性	类型	默认值	描述
type	String	none	按钮样式，可取值见：buttons 样式
color	String	默认与标题文字颜色一致	按钮上文字颜色
background	String	默认值为灰色半透明	按钮的背景颜色，仅在标题栏type=transparent时生效
badgeText	String		按钮上显示的角标文本，最多显示3个字符，超过则显示为...
colorPressed	String	默认值为 color 属性值自动调整透明度为 0.3	按下状态按钮文字颜色
float	String	right	按钮在标题栏上的显示位置，可取值"left"、"right"
fontWeight	String	normal	按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。
fontSize	String		按钮上文字大小
fontSrc	String		按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。
select	String	false	是否显示选择指示图标（向下箭头），常用于城市选择
text	String		按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。
width	String	44px	按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持upx。按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度

      按钮样式

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

值	说明
forward	前进按钮
back	后退按钮
share	分享按钮
favorite	收藏按钮
home	主页按钮
menu	菜单按钮
close	关闭按钮
none	无样式，需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。

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

 

1.在pages.json中设置按键

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

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

 

  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的原生导航栏上放置搜索框。其宽度根据周围元素自适应。

属性	类型	默认值	描述
autoFocus	Boolean	false	是否自动获取焦点
align	String	center	非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。
backgroundColor	String	rgba(255,255,255,0.5)	背景颜色
borderRadius	String	0px	输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持upx。
placeholder	String		提示文本。
placeholderColor	String	#CCCCCC	提示文本颜色
disabled	Boolean	false	是否可输入

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

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

下面的搜索框的事件

onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件。	5+App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	5+App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	5+App、H5	1.6.0

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

 

常见titleNView配置代码示例

{
    "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时点击输入框不置焦，可以跳到新页面搜索
                        }
                    }
                }
            }
        }
        ...
    ]
}