第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"
			}
		]
	}
相关推荐
程序员与背包客_CoderZ13 分钟前
Node.js异步编程——Callback回调函数实现
前端·javascript·node.js·web
非凡ghost28 分钟前
Pale Moon:速度优化的Firefox定制浏览器
前端·firefox
清灵xmf44 分钟前
从 Set、Map 到 WeakSet、WeakMap 的进阶之旅
前端·javascript·set·map·weakset·weakmap
11054654011 小时前
11、参数化三维产品设计组件 - /设计与仿真组件/parametric-3d-product-design
前端·3d
爱笑的林羽1 小时前
Mac M系列 安装 jadx-gui
前端·macos
运维@小兵1 小时前
vue使用路由技术实现登录成功后跳转到首页
前端·javascript·vue.js
肠胃炎2 小时前
React构建组件
前端·javascript·react.js
酷爱码2 小时前
HTML5表格语法格式详解
前端·html·html5
hello_ejb32 小时前
聊聊JetCache的缓存构建
java·前端·缓存
堕落年代2 小时前
SpringSecurity当中的CSRF防范详解
前端·springboot·csrf