小程序开发|uniapp底部导航栏的如何设置

cw11lq

已于 2022-07-06 08:47:20 修改

阅读量5.2k

点赞数

分类专栏：小程序开发文章标签：前端开发语言

于 2022-07-05 14:51:21 首次发布

本文链接：https://blog.csdn.net/shmilylqd/article/details/125615978

版权

小程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.进行小程序开发之前自行下载 HBuilder X的压缩包，它是不需要进行安装的解压以后，将HBuilder X.exe文件拖到桌面上就可直接使用；
2.点击HBuilder X，新建项目，起一个项目名称，默认模板就可；在这里插入图片描述
3.在pages下点击新建目录tabbar，然后将index的那个目录也拖到其下面，在tabbar下面点击新建所需页面即可；

4.底部导航栏的设置主要需要修改pages.json的代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabbar/index/index",
			"style": {
			"navigationBarTitleText": "首页",//顶部样式
			"navigationBarBackgroundColor":"#007AFF",
			"enablePullDownRefresh": false
			}
		}
	    ,{
            "path" : "pages/tabbar/property/property",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "物业地图",
				"navigationBarBackgroundColor":"#007AFF",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/community/community",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "小区地图",
				"navigationBarBackgroundColor":"#007AFF",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/mine/mine",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "个人中心",
				"navigationBarBackgroundColor":"#007AFF",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{//底部样式
			"color":"#999",
			"selectedColor":"#00b783",
			"borderStyle":"#fff",
			"backgroundColor":"white",
			"list":[
				{
					"pagePath":"pages/tabbar/index/index",
					"text":"首页",
					"iconPath":"static/home.png",
					"selectedIconPath":"static/home-active.png"
				},
				{
					"pagePath":"pages/tabbar/property/property",
					"text":"物业地图",
					"iconPath":"static/home.png",
					"selectedIconPath":"static/home-active.png"
				},
				{
					"pagePath":"pages/tabbar/community/community",
					"text":"小区地图",
					"iconPath":"static/home.png",
					"selectedIconPath":"static/home-active.png"
				},
				
				{
					"pagePath":"pages/tabbar/mine/mine",
					"text":"个人中心",
					"iconPath":"static/my.png",
					"selectedIconPath":"static/my-active.png"
				}
				
			]
	}
}