【分享】uni

2023-01-22 05:18| 来源: 网络整理| 查看: 265

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

【本文地址】

公司简介

联系我们