贴子为以前的，官方已经集成了搜索框了
移步到这里看
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);
