动态底部导航tabbar（小程序）

首先创建tabbar目录（不一定必须与本目录结构一致）

app.js

editTabBar: function () {
    var tabbar = this.globalData.tabBar,
      currentPages = getCurrentPages(),
      _this = currentPages[currentPages.length - 1],
      pagePath = _this.__route__;
    (pagePath.indexOf(\'/\') != 0) && (pagePath = \'/\' + pagePath);
    for (var i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
  globalData: {
    userInfo: null,
    scrollHeight:0,
    tabBar: {
      backgroundColor: \"#ffffff\",
      color: \"#BBBBBB\",
      selectedColor: \"#272A39\",
      list: [
        {
          pagePath: \"/pages/index/index\",
          iconPath: \"/pages/images/zhangdan.png\",
          selectedIconPath: \"/pages/images/zhangdan-ed.png\",
          text: \"账单\"
        },
        {
          pagePath: \"/pages/create/create\",
          iconPath: \"/pages/images/jizhang.png\",
          selectedIconPath: \"/pages/images/jizhang.png\",
          text: \"记账\"
        },
        {
          pagePath: \"/pages/show/show\",
          iconPath: \"/pages/images/tongji.png\",
          selectedIconPath: \"/pages/images/tongji-ed.png\",
          text: \"统计\"
        },
      ],
      position: \"bottom\"
    }
  }

由于多个页面需要调用，在app.wxss中写样式

.tabbar_box{  
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 110rpx;
    box-shadow: 0px -3px 4px rgba(222,222,222,0.85);
}
  
.tabbar_nav{
  position: relative;
  font-size: 28rpx;
  height: 100%;
}  
.tabbar_nav text{
  position: absolute;
  bottom: 5rpx;
  left:50%;
	transform:translateX(-50%);
}
.tabbar_nav image{
  position: absolute;
  bottom: 50rpx;
  left:50%;
	transform:translateX(-50%);
}
.tabbar_nav:nth-child(2) .tabbar_icon{
  width: 36px;
  height: 42px;
}
.tabbar_icon{  
    width: 50rpx;
    height: 50rpx;
}

页面tabbar.wxml

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

页面调用时，wxml中：

<import src=\"/templates/tabbar/tabbar.wxml\" />
<template is=\"tabbar\" data=\"{{tabbar}}\" />

在js中的onLoad：

app.editTabBar();