第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"
			}
		]
	}
相关推荐
C_心欲无痕1 天前
前端实现水印的两种方式:SVG 与 Canvas
前端·安全·水印
尾善爱看海1 天前
不常用的浏览器 API —— Web Speech
前端
美酒没故事°1 天前
vue3拖拽+粘贴的综合上传器
前端·javascript·typescript
jingling5551 天前
css进阶 | 实现罐子中的水流搅拌效果
前端·css
悟能不能悟1 天前
前端上载文件时,上载多个文件,但是一个一个调用接口,怎么实现
前端
咖啡の猫1 天前
微信小程序WXSS 模板样式
微信小程序·小程序
可问春风_ren1 天前
前端文件上传详细解析
前端·ecmascript·reactjs·js
羊小猪~~1 天前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
晚风资源组1 天前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu1 天前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript