底部导航栏的制作
一、素材准备
由于底部导航栏有图片，故我们需要找素材，我们在阿里巴巴图标库中，找了4个图标对应首页，分类，购物车和个人模块。
每个图标有两份，不同颜色，对应选中状态和未选中状态，将其放入我们的images目录下的tabbar文件夹里：
二、注册页面
首先，我们需要在小程序中建立好导航对应的页面，在app.json中的pages节点添加上页面地址，这样就完成了对4个页面的注册。
{ "pages":[ "pages/index/index", "pages/class/class", "pages/cart/cart", "pages/center/center" ] } 复制代码
三、底部导航栏的实现
这个底部导航栏的实现，在小程序里中其实很简单，只需要在app.json中添加tabbar节点即可。
"tabBar": { "color": "#7c7c7c", "selectedColor": "#f7545f", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "iconPath": "images/tabbar/home.png", "selectedIconPath": "images/tabbar/curhome.png", "text": "首页" }, { "pagePath": "pages/class/class", "iconPath": "images/tabbar/class.png", "selectedIconPath": "images/tabbar/curclass.png", "text": "分类" }, { "pagePath": "pages/cart/cart", "iconPath": "images/tabbar/cart.png", "selectedIconPath": "images/tabbar/curcart.png", "text": "购物车" }, { "pagePath": "pages/center/center", "iconPath": "images/tabbar/person.png", "selectedIconPath": "images/tabbar/curperson.png", "text": "个人" } ] } 复制代码
通过简单的配置，我们就完成了一个底部导航栏的开发，一起来看看效果吧~
tabBar是小程序的一个重要功能，我们需要熟悉其配置项：
| 属性 | 必填 | 默认值 | 描述 |
| color | 是 | tab上的文字颜色，仅支持十六进制颜色 | |
| selectedColor | 是 | tab上的文字选中时的颜色，仅支持十六进制颜色 | |
| backgroundColor | 是 | tab的背景色，仅支持十六进制颜色 | |
| borderStyle | 否 | black | tab上边框到的颜色，仅支持black和white |
| list | 是 | tab的列表，最少2个，最多5个tab | |
| position | 否 | bottom | 仅支持bottom和top |
| cuntom | 否 | false | 自定义tabBar |
tab的配置项：
| 属性 | 必填 | 默认值 | 描述 |
| pagePath | 是 | 页面路径，必须在pages中先定义 | |
| text | 是 | tab上按钮文字 | |
| iconPath | 否 | 图片路径，大小限制为40KB，不支持网络图片，positon为top时不显示 | |
| selectedIconPath | 否 | 选中时的图片路径，大小限制为40KB，不支持网络图片，positon为top时不显示 |
最后
⚽本文介绍了开发商城类小程序的底部导航栏的实现过程，以及tabBar的使用~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
