uniapp绘制自定义顶部导航

最新推荐文章于 2025-06-24 15:02:01 发布

原创最新推荐文章于 2025-06-24 15:02:01 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #自定义导航

前端开发专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了一种在页面加载时延迟创建自定义标题栏的方法，通过设置定时器并在回调中调用createView函数来实现。具体步骤包括清除定时器、获取应用WebView、设置标题栏背景、图标和输入框样式，并监听输入框的聚焦、失焦和完成事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

startCreateView() {
				var me = this;
				me.titleTimer = setTimeout(function() {
					me.createView();
				}, 100); //具体缓迟时间可以按需设置  
			},
			createView() {
				clearTimeout(this.titleTimer);
				var webView = this.$mp.page.$getAppWebview();
				var nTitle = webView.getTitleNView();
				nTitle.draw(
					[{
							"tag": "rect",
							"id": "rect",
							"color": "#f1f2f3",
							"position": {
								"left": "12px",
								"right": "55px",
								"top": "7px",
								"bottom": "7px"
							},
							"rectStyles": {
								"color": "#f1f2f3",
								"radius": "5px",
								"borderColor": "#999"
							}
						},
						{
							"tag": "img",
							"id": "img",
							"src": "/static/index/icon_search.png",
							"position": {
								"left": "20px",
								"width": "14px",
								"height": "14px",
								"top": "15px",
							}
						},
						{
							"tag": "input",
							"id": "input",
							"position": {
								"left": "42px",
								"right": "70px",
								"top": "8px",
								"bottom": "7px"
							},
							"inputStyles": {
								"placeholder": "请输入企业名、人名、品牌、地址等",
								"borderRadius": "5px",
								"borderWidth": "0px",
								"fontSize": "14px",
								"type": "search",
								"color": "#999999",
								onComplete: function(e) {
									console.log('点击搜索执行')
								},
								onFocus: function(e) {
									console.log('获得焦点')
								},
								onBlur: function(e) {
									console.log('失去焦点')
								}
							}
						}
					]
				);
				nTitle.setInputFocusById("input", true);
			},