怎么给微信小程序添加tabbar下标栏

给微信小程序添加tabbar下标栏

参考微信开放文档的 Tabbar组件

一.熟悉Tabbar组件的属性

项目	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
list	array		否	Tabbar的项的数组，按照规范，至少要有2个Tabbar项
current	number	0	否	当前选中的Tabbar项的下标
bindchange	eventhandler		否	Tabbar项发生改成的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置

list属性是对象数组，每一项表示一个Tabbar项，其字段含义为

字段名	类型	默认值	必填	说明
text	string		是	Tabbar项的标题
iconPath	string		否	Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。
selectedIconPath	string		否	Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。
badge	string		否	是否显示Tabbar的右上角的Badge

二.在阿里云图标库下载图标并保存至小程序项目中

1.搜索关键词，找到喜欢的图标下载。2.下载一个黑色的、一个其他颜色的，在鼠标触发点击事件时可以改变颜色。
3.改变图标的尺寸，tabbar栏建议81*81，不然底部显示不出来。
4.点击“Download as Png”下载图标，在小程序项目根目录创建一个文件夹，将下载的tabbar图标（可重命名，方便分辨）移动到这个文件夹，方便查看。
4.“app.json”文件中添加以下示例代码，将tabbar栏显示出来。

"tabBar": {
    "color": "#282828",   //图标颜色
    "selectedColor": "#7093DB",   //图标选中后颜色
    "backgroundColor": "#FFFFFF",   //tabbar背景颜色
    "list": [ {
        "pagePath": "pages/my-page/my-page",  //点击目标tabbar跳转的页面
        "text": "我",  //图标下的文字
        "iconPath": "images/tabar/tab-three.png", //未选中的图标
        "selectedIconPath": "images/tabar/tab-threee.png",  //选中的图标
         dot: true  //图标左上方显示小红点
         //badge: 'New' 图标左上方显示new字样
      }
    ]
  }`

5.这样就可以把小程序的tabbar制作出来啦！