微信小程序开发笔记二—底部导航栏tabar-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记二—底部导航栏tabar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、实现效果

首先展示一下实现效果
微信小程序开发笔记二—底部导航栏tabar
底部导航栏有三个按键，图标自定义，中间为home键，两侧为个人空间，选中时的图标以及未选中时的图标均为自定义。

二、实现方法

1、准备图标

在小程序工程文件中新建一个文件夹image，里面用来存放按键选中以及未选中时的图标，如下图所示：
微信小程序开发笔记二—底部导航栏tabar
相关图标可以到阿里巴巴矢量图库下载。
本文设计为，选中时图标变为彩色，未选中时图标为黑白，选中时和未选中时的图标都要准备，所以需要将下载的彩色图标转换为黑白图标，用来当作未选中时的图标。这里附上一个可以在线将彩色图片转换成黑白图片的网址：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": "陈"
  }
  ]
},