微信小程序动态tabBar实现

最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了.....

不过也只是一时尴尬而已，然后我就展开了搜索之旅.....然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了裂并有一些做到这效果的方法，那就试一下呗。。其实就是自定义个tabBar的模板，以下是实现：

首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。

然后新建个tabBar.wxml文件，这里就写下你的tabBar的结构。

下面是tabBar所需要用到的样式，我这里就直接写在全局app.wxss了。

然肆漏迹后接下来是js的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的app.js里面方便使用。这里我写了两种tabBar的模板，分别对应来显示

然后在需要用到这个组件的页面上直接调搜辩用。比如这里的index页面。

然后去index.js里面调用tabBar

然后下面是效果图。

就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！

1、tabBar

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

（1）tabBar相关属性

color：tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab的背景色，仅支持十六进制颜色。

borderStyle：tabbar上边框的颜色， 仅支持 black / white。

position：tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。

custom：自定义tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

（2）list

list：tab的列表。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

pagePath：页面路径，必须在pages 中先定义。

text：tab 上按钮文字。

iconPath：图片神衡路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、页面跳转

（1）跳转普通页面

方法① navigator组件

 <!-- 跳转到普通页，可以通过返回按钮返回 -->

 <navigator url="../detail/detail">到详情页</navigator>

方法② navigateTo()方法

navigateTo()方法，用于跳转普通页面。

<view bindtap="gotoDetail">到详情页</view>

gotoDetail(){

    //使用全局api跳转，navigateTo()方法，用于跳转普通页面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

（2）跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。

 <!-- 跳转到tabBar页面，不可以通过返回按钮返回。因为跳转到指定的tabBar页面后，会关闭其他所有页面 -->

<navigator url="../list/list" open-type="switchTab">到列表页</navigator>                                        袭猛                        拍瞎桥                      

方法② switchTab()方法

switchTab()方法，用于跳转tabBar页面。

  <view bindtap="gotoList">到列表页</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }

tips：

1.小程序底部菜单标签个数不少于2个，最多不超过5个。

2.可以在 阿里巴巴矢量图标库 找到你需要的图标。

3.小程序建议图标大小为81*81px

我这边选择的是64尺寸的png图片高咐弊，每一个图标选择两种颜色，分别对应未选中状态和选中状态，具体按照你们设计项目进行

tips：

1.建立项目图片文件夹简樱：images

2.在pages中建立相戚族对应的菜单栏目文件夹

3.配置app.json： tabBar配置

1.app.json中，"window":{}和"tabBar":{}是同级

2. 全局配置

3. 设置tabbar地址:wx.setTabBarBadge(Object object)

---