uni-app底部导航栏tabBar的创建

最新推荐文章于 2024-04-27 13:01:21 发布

MySQL.1

最新推荐文章于 2024-04-27 13:01:21 发布

阅读量261

点赞数

分类专栏： uni-app 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/zgx20130619/article/details/127307935

版权

uni-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

uni-app底部导航栏tabBar的创建

实现效果：

在这里插入图片描述

pages.json 设置tabBar具体代码:

"tabBar": {
		"color": "",
		"fontSize": "",
		"list": [
			{
				"iconPath": "static/tabbar/index1.png",   //默认的tabBar图片
				"pagePath": "pages/tabbar/index/index",   // 选择的tab页的地址
				"selectedIconPath": "static/tabbar/index1_selected.png",  //点击之后的展示图片
				"text": "首页"
			},
			{
				"iconPath": "static/tabbar/learn.png",   
				"pagePath": "pages/tabbar/learn/learn",  // 选择的tab页的地址
				"selectedIconPath": "static/tabbar/learn_selected.png",
				"text": "学习"
			},
			{
				"iconPath": "static/tabbar/home.png",   
				"pagePath": "pages/tabbar/home/home",  // 选择的tab页的地址
				"selectedIconPath": "static/tabbar/home_selected.png",
				"text": "我的"
			}
		]
	}