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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵宁一

点赞是最好的赞赏~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值