动态底部导航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

页面调用时，wxml中：