微信小程序 - 自定义tabbar（组件）

配置项（关于使用组件）

index.wxml

<!-- 
  tabBar:tabBar配置
  activeIndex: 激活页面下标
  slots: 多插槽配置(需与页面一致)
-->
 
<tabbar data="{{tabBar}}" activeIndex="0" solts="{{solts}}">
  <view slot="index">index1...</view>
  <view slot="other">other2...</view>
  <view slot="my">my3....</view>
  <view slot="hello">hello...4</view>
  <view slot="bat">bat...5</view>
</tabbar>

index.js（data）

tabBar: {
    "selectedColor": "#5DBCFF",
    "normalColor": "#333",
    "backgroundColor": "#fff",
    "selectedBackgroundColor": "#fff",
    "list": [{
      "pagePath": "market/index/index",
      "iconPath": "images/icon_home.png",
      "selectedIconPath": "images/icon_home_selected.png",
      "text": "首页"
    }, {
      "pagePath": "tools/index/index",
      "iconPath": "images/icon_cate.png",
      "selectedIconPath": "images/icon_cate_selected.png",
      "text": "分类"
    }, {
      "pagePath": "viewing/index/index",
      "iconPath": "images/icon_member.png",
      "selectedIconPath": "images/icon_member_selected.png",
      "text": "我"
    }, {
      "pagePath": "viewing/index/index",
      "iconPath": "images/icon_member.png",
      "selectedIconPath": "images/icon_member_selected.png",
      "text": "Hello"
    }, {
      "pagePath": "viewing/index/index",
      "iconPath": "images/icon_member.png",
      "selectedIconPath": "images/icon_member_selected.png",
      "text": "Bat"
    }]
  },
  solts: [{
    name: 'index'
  }, {
    name: 'other'
  }, {
    name: 'my'
  }, {
    name: 'hello'
  }, {
    name: 'bat'
  }]