小程序自定义封装的tabbar

component目录下的文件
tabbar.wxml

<view class="tab">
    <view class="row" wx:for="{{tabbar}}" wx:key="{{index}}" data-index="{{index}}" catchtap="gettab">
        <view class="icon">
            <image mode="widthFix" wx:if="{{active != index}}" src="{{item.icon}}">image>
            <image mode="widthFix" wx:if="{{active == index}}" src="{{item.selectIcon}}">image>
        view>
        <view class="text {{active == index ? 'textSelect' : ''}}">{{item.text}}view>
    view>
view>

tabbar.wxss

.tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1rpx solid #f5f5f5;
}

.row {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 33%;
    height: 100%;
    justify-content: space-around;
}

.icon {
    width: 55rpx;
    height: 55rpx;
}

image {
    width: 100%;
    height: 100%;
}

.text {
    font-size: 20rpx;
    color: #bfbfbf;

}

.textSelect {
    color: #00C6C2 !important;
}

tabbar.js

Component({
  properties: {
    active: String,
  },

  data: {
    tabbar: [{
      icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-1.png",
      selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a1.png",
      text: "全部商品",
    }, {
      icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-2.png",
      selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a2.png",
      text: "购物车",
    }, {
      icon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-3.png",
      selectIcon: "https://sucai.suoluomei.cn/sucai_zs/images/20200302140151-a3.png",
      text: "我的订单",
    }]
  },

  methods: {
    gettab(e) {
      var index = e.currentTarget.dataset.index
      switch (index) {
        case 0:
          wx.redirectTo({
            url: "../buyGuide/buyGuide"
          })
          break;
        case 1:
          wx.redirectTo({
            url: "../shopCart/shopCart"
          })
          break;
        case 2:
          wx.redirectTo({
            url: "../userOrder/userOrder"
          })
          break;
      }
      // this.setData({
      //   active: index
      // })
    }
  }
})

tabbar.json

{
  "component": true,
  "usingComponents": {}
}

引入的页面
index.wxml

<view>
    <tabbar active="0">tabbar>
view>

index.json

{
    "navigationBarTitleText": "全部产品",
    "usingComponents": {
      "tabbar": "../../component/tabbar/tabbar"
    }
}

二丶判断显示多少个tabbar
3个
2个
（1）在components新建tabbar文件
tabbar.html

<cover-view class="tabbar_tab">
  <cover-view class="row" wx:for="{{tabbarList}}" wx:key="index" data-item="{{item}}" data-index="{{index}}"
    bindtap="avtiveTab">
    <cover-view class="icon">
      <cover-image mode="widthFix" src="{{active == index ? item.selectIcon: item.icon}}">cover-image>
    cover-view>
    <cover-view class="tabbar_text {{active == index ? 'textSelect' : ''}}">{{item.text}}cover-view>
  cover-view>
cover-view>

tabbar.css

.tabbar_tab {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #f5f5f5;
}

.row {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 33%;
  height: 100%;
  justify-content: space-around;
}

.icon {
  width: 55rpx;
  height: 55rpx;
}

cover-image {
  width: 100%;
  height: 100%;
}

.tabbar_text {
  font-size: 20rpx;
  color: #bfbfbf;

}

.textSelect {
  color: red !important;
}

tabbar.js

Component({
  properties: {
    active: String,
  },

  data: {
    tabbarList: [],
  },

  methods: {
    avtiveTab(e) {
      var index = e.currentTarget.dataset.index
      var item = e.currentTarget.dataset.item
      if (this.data.active != index) {
        wx.redirectTo({
          url: item.skipUrl
        })
      }
    },

    changeTab() {
      console.log(123)
      var typeUser = wx.getStorageSync('typeUser')
      //取出在app.js存储的状态
      console.log(typeUser)
      if (typeUser == 1) {
        var array = [{
          icon: "../../images/quanzi_2.png",
          selectIcon: "../../images/quanzi_1.png",
          skipUrl: "../index/index",
          text: "广场",
        }, {
          icon: "../../images/recommend_2.png",
          selectIcon: "../../images/recommend_1.png",
          skipUrl: "../circle/circle",
          text: "圈子",
        }, {
          icon: "../../images/wode_2.png",
          selectIcon: "../../images/wode_1.png",
          skipUrl: "../mine/mine",
          text: "我的",
        }]
        this.setData({
          tabbarList:array
        })
      } else {
        var list = [{
          icon: "../../images/quanzi_2.png",
          selectIcon: "../../images/quanzi_1.png",
          skipUrl: "../index/index",
          text: "广场",
        }, {
          icon: "../../images/recommend_2.png",
          selectIcon: "../../images/recommend_1.png",
          skipUrl: "../circle/circle",
          text: "圈子",
        }]
        this.setData({
          tabbarList: list
        })
      }
    },
  },

  // 组件的生命周期
  lifetimes: {
    attached() {
      // this.changeTab()
    }
  },
  pageLifetimes: {
    show: function() {
      this.changeTab()
    },
  }
})

（2）app.js里面的onlaunch判断显示1为三个tabbar,0则为两个tabbar

wx.setStorageSync('typeUser', 0)

（3）index.html引入tabbar组件

<view>
	
	<tabbar active="0">tabbar>
view>

index.json

  "usingComponents": {
    "tabbar": "../../components/tabbar/tabbar"
  },

（4）点击页面某个部分升级为三个tabbar
cicle.html

	<view class="yincanTabar">
		<tabbar id="tabbar">tabbar>
	view>

cicle.json

  "usingComponents": {
    "tabbar": "../../components/tabbar/tabbar"
  },

cicle.js

get(){
wx.setStorageSync('typeUser', 1)
var tabbar = this.selectComponent("#tabbar")
tabbar.changeTab()
}

此页面如果不想显示tabbar就隐藏掉

.yincanTabar {
  opacity: 0;
  display: none;
}