如何写一个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 创建页面

相关推荐
子兮曰28 分钟前
PHP漏洞危机,你的网站升级了吗?
前端·后端·php
jerrywus28 分钟前
给 Pi 装上生图插件:从登录报错到画出一只 200×200 的猫
前端·agent·claude
陈随易35 分钟前
搞钱点子之生态鱼缸
前端·后端·程序员
PBitW39 分钟前
从空目录到上线:我全程用 TRAE 做了一款微信小游戏合集(含一次完整架构重构)
前端·trae
小矮强44 分钟前
输入凭证也没用?Windows 共享文件夹“来宾访问被安全策略阻止”
windows·经验分享
不爱学英文的码字机器44 分钟前
从Q1迁到T1,同一个编号已经换了含义
前端·数据库·microsoft
云和数据.ChenGuang1 小时前
光哥说Python 循环导入(Circular Import)深度解析:成因、排查与解决方案
开发语言·前端·人工智能·python·langchain
avi91111 小时前
【AI教人】在Inspector显示所有Delegate-Odin Inspector之三
java·前端·算法·delegate·inspector·editor扩展·unity editor
fengci.1 小时前
BUUCTF(困难部分)
android·开发语言·前端·学习·php
Ward的AI产品实战1 小时前
开源 AI 网关 Magpie 调优终结篇:顺位排错、跨家族对抗审查与 5 大路由组重构(下篇)
前端·人工智能