1. tabBar

tabBar为屏幕下方的选择栏

2. 创建 tabBar 分支

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabbar
git branch # 查看所有分支

3. 创建 tabBar 页面

在pages文件夹下新建页面选择scss页面

创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面

03. tabBar - 图1

4. 配置tabBar效果

将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹

修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点与 pages 同级

"tabBar": {
     "selectedColor": "#C00000", //选中时文字颜色
     "list": [
       {
         "pagePath": "pages/home/home",   //跳转本地路径 
         "text": "首页",  //显示文本
         "iconPath": "static/tab_icons/home.png",  //未选中时图片
         "selectedIconPath": "static/tab_icons/home-active.png"  //选中时图片
       },
       {
         "pagePath": "pages/cate/cate",
         "text": "分类",
         "iconPath": "static/tab_icons/cate.png",
         "selectedIconPath": "static/tab_icons/cate-active.png"
       },
       {
         "pagePath": "pages/cart/cart",
         "text": "购物车",
         "iconPath": "static/tab_icons/cart.png",
         "selectedIconPath": "static/tab_icons/cart-active.png"
       },
       {
         "pagePath": "pages/my/my",
         "text": "我的",
         "iconPath": "static/tab_icons/my.png",
         "selectedIconPath": "static/tab_icons/my-active.png"
       }
     ]
   }

删除 pages.json 中 pages 数组的一个元素

{
 "path": "pages/index/index",
 "style": {
     "navigationBarTitleText": "uni-app"
 }

手动删除 pages 目录下的 index 首页文件夹
同时，把 components 目录下的 uni-link 组件文件夹 删除掉

5. 修改导航条的样式效果

打开 pages.json 这个全局的配置文件

修改 globalStyle 节点如下：

 "globalStyle": {
         "navigationBarTextStyle": "white",  //导航栏文字颜色 只能是black或white
         "navigationBarTitleText": "黑马优购", 
         "navigationBarBackgroundColor": "#C00000",  //导航栏背景颜色
         "backgroundColor": "#FFFFFF",  //背景颜色
     "app-plus": {
         "background": "#efeff4"
     }
 }

修改每个tarBar对应path中的navigationBarTitleText 为标题文本

{
     "path": "pages/home/home",
     "style": {
         "navigationBarTitleText": "黑马优购", //对应页面的标题文本
         "enablePullDownRefresh": false
     }
 }

6. 提交并合并分支

git add .
git commit -m "update tabBar"
git remote add origin gitee库连接
git push -u origin tabbar

将本地的tabbar分支合并到本地master分支

git checkout master
git merge tabbar
git push -u origin master

删除本地的tabbar分支

git branch -d tabbar