第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"
			}
		]
	}
相关推荐
IT_陈寒13 小时前
SpringBoot高并发优化:这5个被忽视的配置让你的QPS提升300%
前端·人工智能·后端
光影少年13 小时前
css优化都有哪些优化方案
前端·css·rust
BillKu13 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
yangzhi_emo14 小时前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军14 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛14 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户4582031531714 小时前
CSS无需JavaScript的交互效果实现
前端·css
影i14 小时前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端714 小时前
Alien-Signals 响应式系统
前端·vue.js
你单排吧14 小时前
Electron打包图标修改失败问题
前端