微信小程序开发笔记二—底部导航栏tabar

一、实现效果

首先展示一下实现效果

底部导航栏有三个按键，图标自定义，中间为home键，两侧为个人空间，选中时的图标以及未选中时的图标均为自定义。

二、实现方法

1、准备图标

在小程序工程文件中新建一个文件夹image，里面用来存放按键选中以及未选中时的图标，如下图所示：

相关图标可以到阿里巴巴矢量图库下载。
本文设计为，选中时图标变为彩色，未选中时图标为黑白，选中时和未选中时的图标都要准备，所以需要将下载的彩色图标转换为黑白图标，用来当作未选中时的图标。这里附上一个可以在线将彩色图片转换成黑白图片的网址：http://www.do.mo.cn/68/chs/app-image-gray/

2、app.json文件添加新页面

每一个页面都有自己相应的.json、.ts(.js)、.wxml和.wxss文件，在添加新页面时并不需要自己挨个创建，只需要在app.json中的pages下新添加页面并保存，即可自动创建好相关文件。这里我们新建三个页面，分别是home、lin和chen：

"pages": [
    "pages/home/home",
    "pages/lin/lin",
    "pages/chen/chen"
  ],

保存后在左侧的工程文件中会自动新建好上述相关文件，到此我们就创建好了三个页面。

3、app.json中添加tabar组件

先上代码

"tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
    {
      "pagePath": "pages/lin_enter/lin_enter",
      "iconPath": "image/lin.png",
      "selectedIconPath": "image/lin_selected.png",
      "text": "林"
    },
    {
      "pagePath": "pages/home/home",
      "iconPath": "image/home.png",
      "selectedIconPath": "image/home_selected.png",
      "text": "主页"
    },
  {
    "pagePath": "pages/chen_enter/chen_enter",
    "iconPath": "image/chen.png",
    "selectedIconPath": "image/chen_selected.png",
    "text": "陈"
  }
  ]
},

• color：导航栏图标未选中时的文字颜色
• selectedColor：导航栏图标选中时的文字颜色
• borderStyle：导航栏边框颜色(black/white)
  设置成black会有黑色边框
• backgroundColor：导航栏背景颜色
• list：导航栏配置数组
  list中的元素最多5个，最少两个
• pagePath：选中导航栏图标时显示的页面
• iconPath：未选中时的图标路径
• selectedIconPath：选中时的图标路径
• text：图标下方文字内容
  图标路径就是上面创建的image文件夹中的文件

至此就完成了底部导航栏的设计。

三、注意事项

如果配置完未显示底部导航栏，可以先将list中的首个页面设置成与pages中的首个页面相同，保存后就会出现底部导航栏。如有需要，后续再调整list中页面的顺序导航栏也不会消失。

看到这里如果你也配置成功了记得给博主一个赞哟~如果没有成功记得留言讨论！

PS：本人也是初学微信小程序设计，有存在问题的地方还请各位大佬批评指正呀！