【分享】uni-app 原生导航 titleNView 搜索框

贴子为以前的，官方已经集成了搜索框了
移步到这里看
https://uniapp.dcloud.io/collocation/pages?id=app-plus

经测试官方已修复安卓的BUG

以下是苹果的

操作方法，先配置是下page.json

        {  
            "path": "你的页面",  
            "style": {  
                "backgroundColorTop": "#ebebeb",  
                "backgroundColorBottom": "#ebebeb",  
                "app-plus": {  
                    "scrollIndicator": "none",  
                    "titleNView": {  
                        "titleText":"",//不要设置标题  
                        "buttons": [{  
                            "text": "取消",  
                            "fontSize": "14"  
                        }]  
                    }  
                }  
            }  
        }

不要设置标题，不然在安卓上就会显示出来，画的盖不住

以下操作在您要画搜索框的页面

在onload引用startcreatview就可以了

设置延迟，不做延迟会出现错误

            startcreatview(){  
                var s = this;  
                s.TitleTimer = setTimeout(function() {  
                    s.createView();  
                }, 100);//具体缓迟时间可以按需设置  
            },

            createView() {  
                clearTimeout(this.TitleTimer);  
                var s = this;  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                var currentWebview = page.$getAppWebview();  
                var nTitle = currentWebview.getTitleNView();  
                    nTitle.draw(  
                        [{  
                                "tag": "rect",  
                                "id": "rect",  
                                "color": "#999",  
                                "position": {  
                                    "left": "50px",  
                                    "right": "50px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "rectStyles": {  
                                    "color": "#f6f6f6",  
                                    "radius": "30px",  
                                    "borderColor": "#999"  
                                }  
                            },  
                            {  
                                "tag": "font",  
                                "id": "font",  
                                "text": "\ue466",  
                                "position": {  
                                    "left": "55px",  
                                    "width": "30px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "textStyles": {  
                                    "size": "13px",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999"  
                                }  
                            },  
                            {  
                                "tag": "input",  
                                "id": "input",  
                                "position": {  
                                    "left": "80px",  
                                    "right": "70px",  
                                    "top": "7px",  
                                    "bottom": "7px"  
                                },  
                                "inputStyles": {  
                                    "placeholder": "关键字搜索",  
                                    "borderRadius": "30px",  
                                    "borderWidth": "0px",  
                                    "fontSize": "13px",  
                                    "type": "search",  
                                    "fontSrc": "/static/uni.ttf",  
                                    "color": "#999",  
                                    onComplete: function(e) {  
                                        console.log('点击搜索执行' + e.text)  
                                    },  
                                    onFocus: function(e) {  
                                        console.log('获得焦点')  
                                    },  
                                    onBlur: function(e) {  
                                        console.log('失去焦点')  
                                    }  
                                }  
                            }  
                        ]  
                    );  
            },  

如果只需要一个假搜索框，把上面代码的inputStyles部份替换为
"textStyles": {
"size": "13px",
"fontSrc": "/static/uni.ttf",
"color": "#999"
}
同时添加监听假搜索框的点击事件nTitle.addEventListener('click', '点击事件', false);