第3讲 小程序TabBar搭建

tabBar,底部三个tab,对应三个页面,创建投票,关于锋哥,我的。

新建三个页面

pages.json 页面定义

bash 复制代码
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/create/create",
			"style": {
				"navigationBarTitleText": "java1234-微投票"
			}
		},
		{
			"path": "pages/author/author",
			"style": {
				"navigationBarTitleText": "关于峰哥"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

tabBar定义 -注意iconPath文件

bash 复制代码
,
	"tabBar": {
		"color":"#4D4D4D",
		"selectedColor":"#13227a",
		"backgroundColor":"#FFFFFF",
		"borderStyle":"black",
		"position":"bottom",
		"list": [
			{
				"text": "创建",
				"pagePath": "pages/create/create",
				"iconPath": "static/tabbar/icon/_create.png",
				"selectedIconPath": "static/tabbar/icon/create.png"
			},
			{
				"text": "关于锋哥",
				"pagePath": "pages/author/author",
				"iconPath": "static/tabbar/icon/_author.png",
				"selectedIconPath": "static/tabbar/icon/author.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/my/my",
				"iconPath": "static/tabbar/icon/_my.png",
				"selectedIconPath": "static/tabbar/icon/my.png"
			}
		]
	}
相关推荐
codeGoogle1 天前
自研 IM 还是选择第三方 SDK?企业开发者应该如何权衡?
前端·后端·程序员
Ai拆代码的曹操1 天前
Nginx upstream keepalive 连接池中毒排查实录
chrome·nginx·php
IT小白杨1 天前
防关联用指纹浏览器还是虚拟机好?2026年技术架构深度对比与选型决策
chrome·经验分享·microsoft·架构·安全架构·指纹浏览器
用户938515635071 天前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒1 天前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李1 天前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
资质小秘书1 天前
2026 年 8 月行业科普:小程序商家需要北京 ICP 许可证吗?
其他·小程序
赵大仁1 天前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui
kyriewen1 天前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
IT_陈寒1 天前
我又被JavaScript的隐式类型转换坑了
前端·人工智能·后端