uniapp头部透明配置

最新推荐文章于 2024-01-26 17:48:04 发布

原创最新推荐文章于 2024-01-26 17:48:04 发布 · 5.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端

这篇博客详细记录了如何在uniapp中实现两种顶部导航栏的样式：透明渐变样式和带有搜索输入的导航栏。对于透明渐变样式，通过配置page.json实现了导航栏背景颜色的渐变效果；而对于导航栏带搜索框的样式，不仅设置了透明背景，还添加了自定义按钮和搜索输入框的详细属性，包括字体、颜色、背景等。

uniapp顶部原生导航栏：（自己记录）
1.透明渐变样式
在这里插入图片描述

配置page.json

				{
					"path": "nav-transparent/nav-transparent",
					"style": {
						"navigationBarTitleText": "透明渐变导航栏",
						"transparentTitle": "auto",
						"navigationBarBackgroundColor":"#CCCCCC"
						
					}
				},

页面正常写即可

2.导航栏带搜索

在这里插入图片描述

			{
					"path": "nav-search-input/nav-search-input",
					"style": {
						"navigationBarTitleText": "导航栏带搜索框",
						"app-plus": {
							"titleNView": {
								"type": "transparent",
								"titleColor": "#fff",
								"backgroundColor": "#007AFF",
								"buttons": [{
									"fontSrc": "/static/uni.ttf",
									"text": "\ue537",
									"width": "40px",
									"fontSize": "28px",
									"color": "#fff",
									"background": "rgba(0,0,0,0)"
								}],
								"searchInput": {
									"backgroundColor": "#fff",
									"borderRadius": "6px",
									"placeholder": "请输入地址 如：大钟寺",
									"disabled": true
								}
							}
						}
					}
				},