uni-app底部导航栏设置

一、新建需要的页面
uni-app底部导航栏设置_第1张图片
二、在pages.json文件里面配置文件页面路由
uni-app底部导航栏设置_第2张图片
三、设置底部导航栏
uni-app底部导航栏设置_第3张图片
代码:

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/news/index"
		},
		{
			"path": "pages/my/index"
		}
	],
	"globalStyle": {
		 "navigationStyle": "custom"
	},
	 "tabBar":{
	        "color":"#333",
	        "selectedColor":"deepskyblue",
	        "backgroundColor":"#eee",
	        "borderStyle":"black",
	        "list":[
	            {
	                "pagePath":"pages/index/index",
	                "text":"精彩视频",
					"iconPath":"static/icon_jingcai01.png",
					"selectedIconPath":"static/[email protected]"
	            },
	            {
	                "pagePath":"pages/news/index",
	                "text":"原始视频",
					"iconPath":"static/[email protected]",
					"selectedIconPath":"static/[email protected]"
	            },
	            {
	                "pagePath":"pages/my/index",
	                "text":"个人中心",
					"iconPath":"static/[email protected]",
					"selectedIconPath":"static/[email protected]"
	            }
	        ]
	    }
}

你可能感兴趣的:(uni-app底部导航栏设置)