uni-app自定义导航栏(搜索框和按钮)

参考网址:https://blog.csdn.net/yinge0508/article/details/98100240

pages.json中配置app-plus:searchInput

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarBackgroundColor": "#00c170",
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [ 
                            {
                                "text": "搜索", 
                                "fontSize":"16",
                                "float": "right",
                                "color":"#fff"
                            },
                        ],
                        "searchInput":{
                                "align": "center",
                                "placeholder": "请输入查找房源信息",
                                "borderRadius":"50upx",
                                "backgroundColor": "#fff"
                            }
                    }
                }
            }
        }
    ]

监听输入框和按钮事件

在需要监听的页面写

onNavigationBarButtonTap(val) {
    console.log("val")
},
onNavigationBarSearchInputChanged (val) {
     console.log("val")
}    

 

posted @ 2021-04-08 14:45  吃饭睡觉打痘痘  阅读(1773)  评论(0编辑  收藏  举报