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

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