欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uniApp - 商城项目 2 - 底部导航

程序员文章站 2022-03-21 21:22:37
...

开 4 个导航栏目

  1. 首页
  2. 分类
  3. 推荐
  4. 我的

主题色 用的是 #347AD0 一个蓝色系

先上阿里图标库 下载8张图

选中使用 #347ad0 颜色 选不中使用 #676767 颜色

阿里图标官网

进入static 静态资源管理文件夹中只留下字体文件 uni.ttf 删除其他静态资源

并将下载好的 tabbar 组图 图标 放入该文件夹中

uniApp - 商城项目 2 - 底部导航

新建 分类页面 classify.vue

uniApp - 商城项目 2 - 底部导航

新建 推荐页面 recommend.vue

uniApp - 商城项目 2 - 底部导航

新建 我的页面 my.vue

uniApp - 商城项目 2 - 底部导航

修改 pages.json 配置文件

{
	"pages": [
		{
            "path" : "pages/home/home",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
        ,{
            "path" : "pages/classify/classify",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/recommend/recommend",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"pageOrientation": "portrait",
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "Hello uniapp",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#F8F8F8",
		"backgroundColorTop": "#F4F5F6",
		"backgroundColorBottom": "#F4F5F6"
	},
	"tabBar":{
		"color": "#676767",
		"selectedColor": "#347ad0",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath":"pages/home/home",
				"text":"首页",
				"iconPath":"static/nav1.png",
				"selectedIconPath":"static/nav1_fill.png"
			},
			{
				"pagePath":"pages/classify/classify",
				"text":"分类",
				"iconPath":"static/nav2.png",
				"selectedIconPath":"static/nav2_fill.png"
			},
			{
				"pagePath":"pages/recommend/recommend",
				"text":"推荐",
				"iconPath":"static/nav3.png",
				"selectedIconPath":"static/nav3_fill.png"
			},
			{
				"pagePath":"pages/my/my",
				"text":"我的",
				"iconPath":"static/nav4.png",
				"selectedIconPath":"static/nav4_fill.png"
			}
		]
	}
}

效果图

uniApp - 商城项目 2 - 底部导航
uniApp - 商城项目 2 - 底部导航
uniApp - 商城项目 2 - 底部导航
uniApp - 商城项目 2 - 底部导航

注意事项

“pagePath”:“pages/my/my”, pages 前面没有斜杠,使用编辑器提示可能要踩坑

路由跳转是需要加斜杠的

更多配置请移步官方文档

下一篇博文将进行首页ui的开发

uniApp - 商城项目3 首页