微信小程序自定义tabbar

原文地址：http://www.wxapp-union.com/article-1405-1.html
1.创建wxml模板

2.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: 120rpx;
    border-top: 1rpx solid gray; 
}

.tabbar_nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    height: 100%;
}

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

3.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,
    tabbar:{
      color: "#000000",
      selectedColor: "#0f87ff",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "/pages/tabbar/tabbar",
          text: "项目",
          iconPath: "/images/item.png",
          selectedIconPath: "/images/item_HL.png",
          selected: true
        },
        {
          pagePath: "/pages/address/address",
          text: "通讯录",
          iconPath: "/images/ts.png",
          selectedIconPath: "/images/ts1.png",
          selected: false
        },
        {
          pagePath: "/pages/personal/personal",
          text: "文件",
          iconPath: "/images/wjj.png",
          selectedIconPath: "/images/wjj1.png",
          selected: false
        }
      ],
      position: "bottom"
    }
  }

4.在一级页面引入模板