第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"
			}
		]
	}
相关推荐
后台模板学习23 分钟前
从0到1用Vite构建电商订单系统前端性能优化方案
前端
Wang's Blog24 分钟前
Vibe Coding一人即团队系列58: HTML演示文稿自动生成
前端·人工智能·html
FoldWinCard39 分钟前
基于k8s高可用web集群
前端·容器·kubernetes
神探小白牙40 分钟前
海康视频在vue2.0中的使用
前端·音视频
Tanjia_kiki1 小时前
谷歌浏览器中F12编辑并重发请求
开发语言·前端·javascript
honkun61 小时前
vue 表格组件 vxe-table 实现拖拽列字段自动生成透视表汇总
前端·javascript·vue.js
www_aiyuanma_vip1 小时前
家乡介绍小程序
小程序·notepad++
新中地GIS开发老师1 小时前
WebGIS开发入门 | 从 Web 开发到地图开发,差别在哪儿?
前端·vue·webgis
IMPYLH1 小时前
HTML 的 <p> 元素
前端·javascript·html
leoZ2311 小时前
第 4 篇:布局骨架——页面壳、栅格、卡片
前端·javascript·vue.js·opencv·计算机视觉·数据挖掘·语音识别