在前面介绍原生小程序框架的章节中,我们在app.json文件中添加过tabBar底部导航,这节我们再详细讲解一下
1、添加图片到项目中
我们需要将底部导航栏的照片添加到项目中,一般外来文件都放在static文件夹中。为了避免重复操作,这次将项目用到的所有照片一次性复制到项目中
(1)下载压缩文件images.zip
(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后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录