微信小程序tabbar底部导航

 editTabBar: function() {
    var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
    0 != s.indexOf(\"/\") && (s = \"/\" + s);
    for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
    t.setData({
      tabbar: e
    });
  },
  tabBar: {
    color: \"#123\",
    selectedColor: \"#1ba9ba\",
    borderStyle: \"#1ba9ba\",
    backgroundColor: \"#fff\",
    list: [ {
      pagePath: \"/we7/pages/index/index\",
      iconPath: \"/we7/resource/icon/home.png\",
      selectedIconPath: \"/we7/resource/icon/homeselect.png\",
      text: \"首页\"
    }, {
      pagePath: \"/we7/pages/user/index/index\",
      iconPath: \"/we7/resource/icon/user.png\",
      selectedIconPath: \"/we7/resource/icon/userselect.png\",
      text: \"我的\"
    } ]
  },
  globalData: {
    userInfo: null,
    tabbar: {
      color: \"#333\",
      selectedColor: \"#d0501f\",
      backgroundColor: \"#ffffff\",
      borderStyle: \"#d5d5d5\",
      list: [ {
        pagePath: \"/pages/seller/gzt\",
        text: \"工作台\",
        iconPath: \"/pages/images/gzt@3x.png\",
        selectedIconPath: \"/pages/images/gztxz@3x.png\",
        selected: !0
      }, {
        pagePath: \"/pages/seller/cp/cplb\",
        text: \"商品\",
        iconPath: \"/pages/images/dbdc.png\",
        selectedIconPath: \"/pages/images/dbdcxz.png\",
        selected: !1
      }, 
      position: \"bottom\"
    }
  },

<template name=\"tabbar\">
  <view class=\"tabbar_box\" style=\"background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position==\'top\'?\'top:0\':\'bottom:0\'}}\">
    <navigator class=\"tabbar_nav\" openType=\"redirect\" style=\"width:{{1/tabbar.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}\" url=\"{{item.pagePath}}\" wx:for=\"{{tabbar.list}}\" wx:key=\"index\">
      <image class=\"tabbar_icon\" src=\"{{item.selected?item.selectedIconPath:item.iconPath}}\"></image>
      <text>{{item.text}}</text>
    </navigator>
  </view>
</template>

.tabbar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  border-top: 0.5rpx solid #d5d5d5;
}

.tabbar_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 25rpx;
  height: 100%;
}

.tabbar_icon {
  width: 40rpx;
  height: 40rpx;
}