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

 

 

你可能感兴趣的:(uni-app,nui-app,新手,基础)