当前位置: 首页 > article >正文

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

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

{
	"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  创建页面
 


http://www.kler.cn/a/472744.html

相关文章:

  • python常见绘图及代码
  • Electron快速入门——跨平台桌面端应用开发框架
  • 用python 进行雷电接口检测
  • 杭州市有哪些大学能够出具论文检索报告?
  • Java-编写的一个生产者-消费者模式
  • Elasticsearch分片数量是什么意思?
  • 联邦学习中的LoRA:FedLoRA
  • Gin 框架中间件原理
  • 小程序开发-页面事件之上拉触底实战案例
  • Win32汇编学习笔记07.筛选器异常
  • nginx-配置指令的执行顺序!
  • Dart语言的网络编程
  • React中 Reconciliation算法详解
  • 深度学习blog-深刻理解线性变换和矩阵
  • 负载均衡技术【内网去外网运营商出口负载均衡】
  • Web3 社交革命:告别中心化,拥抱多元连接
  • Nacos注册中心微服务注册
  • 如何在 Docker 中切换登录用户
  • 前端笔记:路由
  • 深度学习第三弹:python入门与线性表示代码
  • find 查找文件grep匹配数据
  • 【Altium】AD使用智能粘贴功能把多个网络标签改成端口
  • Erlang语言的字符串处理
  • Visual CoT:解锁视觉链式思维推理的潜能
  • nginx 日志规范化意义及实现!
  • 【江协STM32】10-2/3 MPU6050简介、软件I2C读写MPU6050