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

绝地灬酷狼 2023-06-07 14:28 9阅读 0赞

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

#### 1、添加图片到项目中 ####

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

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

> 链接:[https://pan.baidu.com/s/1ch0UWRH96Ln6sh\_3nyAXDA][https_pan.baidu.com_s_1ch0UWRH96Ln6sh_3nyAXDA] 密码:qfi1

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

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

###### （3）图标下载网址推荐 ######

> 阿里妈妈矢量图标库  
> [https://www.iconfont.cn][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、查看效果 ####

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

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 2][]

[https_pan.baidu.com_s_1ch0UWRH96Ln6sh_3nyAXDA]: https://pan.baidu.com/s/1ch0UWRH96Ln6sh_3nyAXDA
[format_png]: /images/20230601/db0d75729f224283805acea9296bb0fe.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[format_png 1]: /images/20230601/6408d524dd9c45c6b2148dda196333d6.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230601/3635233da714443cb7676133cc600688.png