uni-app 原生标题栏搜索输入框事件合集

傷城~ 2023-02-14 10:53 3阅读 0赞

"pages": [
            {
                "path": "pages/index/index",
                "style": {
                    "navigationBarTitleText": "主页"
                    "app-plus": {
                        "titleNView": {
                            "type":"default",
                            "backgroundColor":"#2688DE",
                            "searchInput":{
                                "backgroundColor":"#66C6E8",
                                "borderRadius":"14px",
                                "placeholder":"输入产品名称或编码",
                                "placeholderColor":"#fff",
                                "align":"center",
                                "disabled":true//划重点！！！
                                }
                        }
                    }
                }
            }
        ]

![20200602175118665.png][]

![20200602175222222.png][]

具体链接：[https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f][https_uniapp.dcloud.io_collocation_frame_lifecycle_id_e9_a1_b5_e9_9d_a2_e7_94_9f_e5_91_bd_e5_91_a8_e6_9c_9f]

//注意！！！
    //1.在page页面一定要写"disabled":true
    //2.一定要和data、methods同级使用
    
    onNavigationBarSearchInputClicked(e) {
    	console.log('点击了搜索框')
    }

//注意！！！
    //1.在page页面一定要注释//"disabled":true  这句话！
    //2.在methods内使用
    
    
    //监听原生标题栏搜索输入框输入内容变化事件（实时打印）
    onNavigationBarSearchInputChanged(e) {
    	console.log(e.text)  //打印输入框值
    },
    
    
    //监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
    onNavigationBarSearchInputConfirmed(e) {
    	console.log(e.text)  //打印输入框值
    },

[20200602175118665.png]: https://img-blog.csdnimg.cn/20200602175118665.png
[20200602175222222.png]: https://img-blog.csdnimg.cn/20200602175222222.png
[https_uniapp.dcloud.io_collocation_frame_lifecycle_id_e9_a1_b5_e9_9d_a2_e7_94_9f_e5_91_bd_e5_91_a8_e6_9c_9f]: https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F