如何写一个uniapp自定义tarbar导航栏?

第一 图片 第二路 创建页面 设置tarbar

javascript 复制代码
{
	"pages": [

		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "",
				"navigationBarBackgroundColor": "#00C8AA"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "医院名称",
				"navigationBarBackgroundColor": "#00C8AA",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path": "pages/information/information",
			"style": {
				"navigationBarTitleText": "医院信息",
				"navigationBarBackgroundColor": "#00C8AA",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path": "pages/expert/expert",
			"style": {
				"navigationBarTitleText": "专家榜",
				"navigationBarBackgroundColor": "#00C8AA",
				"navigationBarTextStyle": "white"
			}
		}

	],
	"tabBar": {
		"backgroundColor": "#ffffff",
		"color": "rgba(128, 128, 128, 1)",
		"selectedColor": "#7CECE4",
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/w.png",
				"selectedIconPath": "static/homes.png"
			},
			{
				"text": "医院信息",
				"pagePath": "pages/information/information",
				"iconPath": "static/info.png",
				"selectedIconPath": "static/j.png"
			},
			{
				"text": "专家榜",
				"pagePath": "pages/expert/expert",
				"iconPath": "static/doctor.png",
				"selectedIconPath": "static/ooo.png"
			}

		]
	},


	"easycom": {
		"autoscan": true,
		"custom": {
			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
		}
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4",
			"titleNView": false
		}
	},
	"condition": { //模式配置,仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [{
			"name": "", //模式名称
			"path": "pages/home/home", //启动页面,必选
			"query": "" //启动参数,在页面的onLoad函数里面得到
		}]
	}
}

其二

在static文件夹放图片

其三 设置pages.json 创建页面

相关推荐
恋猫de小郭8 分钟前
Dart 3.13 大更新,感觉比 Flutter 更带劲
android·前端·flutter
晓得迷路了9 分钟前
栗子前端技术周刊第 142 期 - DeepSeek Harness、pnpm 12 RC、crypto‑js...
前端·javascript·ai编程
xiaoxiangsiyan15 分钟前
RHCE之2026年全套考点详解
运维·前端·网络·chrome·学习·rhce
love530love15 分钟前
彻底清理 Windows 右键“打开方式“中的重复/失效程序项(PyCharm 多版本残留实战 + 自动化脚本)
运维·人工智能·windows·pycharm·jetbrains·toolbox
Fluxart.ai20 分钟前
Etsy手工制品换背景,用什么AI能保留手作质感?
前端·javascript·人工智能
小玮看世界38 分钟前
[Python] str() 和 join() 的区别与实战避坑指南
前端·javascript·python
hyf32663343 分钟前
低成本站群泛程序部署:单服务器托管百站稳定运行教程
运维·服务器·前端·搜索引擎·蜘蛛池
程序员黑豆1 小时前
Java正则表达式详解
java·前端·ai编程
不可求~10 小时前
多模型路由怎么落地:把任务分流写进项目的最小实现
java·前端·数据库
王维同学12 小时前
进程模块枚举、映像身份与线程启动地址关联
c++·windows·安全