小程序---自定义特殊样式的tabBar

UI设计了一个中央凸起的tabbar，且中间是个gif动图，于是就有了这个小组件。。。

Git：github.com/OldDream/mi…

效果图如下：

项目配置可参考官方文档：

developers.weixin.qq.com/miniprogram…

第一步：

// 根目录app.json
"tabBar": {
    "custom": true, // 声明自定义
    "color": "#999999",
    "selectedColor": "#FF713D",
    "backgroundColor": "#000000",
    "list": [ // 下面的数据按照官方要求配置
      {
        "pagePath": "pages/index/index",
        "text": "left",
        "iconPath": "/custom-tab-bar/icon/icon_home.png",
        "selectedIconPath": "/custom-tab-bar/icon/icon_home_HL.png"
      },
      {
        "pagePath": "pages/index/index",
        "iconPath": "/custom-tab-bar/icon/icon_home.png", /* 这条随意，项目写死了gif图，有需要的可以按需配置 */
        "selectedIconPath": "/custom-tab-bar/icon/icon_home_HL.png",  /* 同上 */
        "isSpecial": true, // 标记为特殊图标
        "text": "首页"
      },
      {
        "pagePath": "pages/page2/page2",
        "text": "right",
        "iconPath": "/custom-tab-bar/icon/icon_mine.png",
        "selectedIconPath": "/custom-tab-bar/icon/icon_mine_HL.png"
      }
    ]
  }

其余可参考custom-tab-bar目录下的文件，备注还算详尽

想使用gif之类动态图标的，可写到wxml中。或者写到js里动态绑定，实现方法很多。本demo使用了gif图。

第二步：

tab对应页面的json文件，调用自定义tabbar：

{
  "usingComponents": {}
}

第三步：

tab对应页面中，用js设定高亮选中的条目：

 /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onLoad: function () {
    // 设置本页中自定义tabBar
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 // 设置tabBar中 设置为选中的index
      })
    }
  },