uni-app开发app配置原生导航栏

最新推荐文章于 2025-07-09 13:36:55 发布

原创最新推荐文章于 2025-07-09 13:36:55 发布 · 782 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

在uni-app开发过程中，当使用webview加载外部页面时，自定义导航栏可能被遮挡。为了解决这个问题，可以在pages.json中设置app的原生导航栏。例如，可以通过指定`titleNView`的`type`为`default`，并添加自定义按钮和搜索输入框的样式来实现。配置包括设置背景色、字体图标、颜色、浮动位置等参数。

uni-app开发app配置原生导航栏

我们在开发APP应用的时候，有些时候，我们在页面中会使用webview去引用其他页面，这样，自定义导航栏就会被webview的页面遮住，遇到此场景，我们需要配置pages.json，设置app原生导航栏去操作

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": {
						"type": "default",
						"backgroundColor": "#fff",
						"buttons": [{
							"text": "\ue626", // Unicode 编码，记得一定要带u，不能不生效，text为字体图标名字加u
							"fontSize": "20px",  
							"fontSrc": "/static/font/iconfont.ttf",  // 引用的阿里字库
							"color": "#000",
							"float": "right"
						}],
						"searchInput": {
							"backgroundColor": "#f2f2f2",
							"borderRadius": "14px",
							"autoFocus": true,
							"placeholder": "Please enter search content",
							"placeholderColor": "#909399",
							"align": "left",
							"disabled": false
						}
					}
				}
			}
		}
	}
]