uni-app 原生导航 titleNView 搜索框

Z时代
2024-01-10
分类：技术分享

贴子为以前的，官方已经集成了搜索框了

移步到这里看

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('失去焦点')
}
}
}
]
);
},