第3讲小程序TabBar搭建

最新推荐文章于 2024-08-19 11:13:07 发布

九品印相

最新推荐文章于 2024-08-19 11:13:07 发布

阅读量1.1k

点赞数 6

分类专栏： uniapp微信小程序投票系统文章标签：小程序 chrome 前端

本文链接：https://blog.csdn.net/m0_68935893/article/details/136101241

版权

uniapp微信小程序投票系统专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了在Vue小程序中如何配置底部TabBar，包括三个页面（创建投票、关于锋哥、我的）的定义，以及对应的页面路径和图标设置。

摘要由CSDN通过智能技术生成

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

在这里插入图片描述
pages.json 页面定义

"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文件

,
	"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"
			}
		]
	}