底部导航栏的制作

一、素材准备

由于底部导航栏有图片，故我们需要找素材，我们在阿里巴巴图标库中，找了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时不显示

最后