2.6【微信小程序全栈开发课程】添加底部导航

在前面介绍原生小程序框架的章节中，我们在app.json文件中添加过tabBar底部导航，这节我们再详细讲解一下

1、添加图片到项目中

我们需要将底部导航栏的照片添加到项目中，一般外来文件都放在static文件夹中。为了避免重复操作，这次将项目用到的所有照片一次性复制到项目中

（1）下载压缩文件images.zip

链接:https://pan.baidu.com/s/1ch0UWRH96Ln6sh_3nyAXDA 密码:qfi1

（2）解压文件粘贴到文件夹中

将images.zip文件解压，打开解压后的images文件夹，将所有的照片粘贴到项目中，粘贴后项目目录如下：

（3）图标下载网址推荐

阿里妈妈矢量图标库
https://www.iconfont.cn

网址可以收藏一下，写自己的小程序项目的时候能用到

2、编辑src/app.json文件

添加tabBar对象

// 参考代码，无需粘贴
//"window": {
  //...
//}


// 需要添加的代码
"tabBar": {
  "selectedColor":  "#EA5149",
  "list": [{
    "text": "首页",
    "pagePath": "pages/index/main",
    "iconPath": "static/images/danhuang.png",
    "selectedIconPath": "static/images/danhuang-active.png"
  },
  {
    "text": "我的",
    "pagePath": "pages/me/main",
    "iconPath": "static/images/binggan.png",
    "selectedIconPath": "static/images/binggan-active.png"
  }]
}

• selectedColor tab 上的文字选中时的颜色，要注意这里只能是十六进制的颜色，比如白色要写成#FFFFFF，不能写成white

• pagePath 页面路径，这个路径必须在pages数组中先定义

• iconPath 未选中时图片的路径

• selectedIconPath 选中时图片的路径

3、查看效果

分别点击底部导航栏「我的」、「首页」按钮，出现以下效果，就说明配置成功了~

作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录