uni-xiudoyou/src/pages/components/tabbar.vue

<!-- tabbar -->
<template name="tab-bar">
  <views class="tabbar">

    <view class="tabbar-warp" v-for="(item,index) in tabList" :key="index">
      <view class="navigator" :class="currentIndex === index ? 'active' : ''"  @tap='switchTab(index)'>
        <view class="icon">
          <image :src="item.icon"></image>
        </view>
        <view class="test">{{item.text}}</view>
      </view>
    </view>

  </views>
</template>

<script>

export default {
  name: 'tabbar',
  components: {},
  data () {
    //这里存放数据
    return {
      tabList: [
        {
          icon: 'icon-emotion',
          text: 'tab01',
          badge: 1
        },
        {
          icon: 'icon-qianbao',
          text: 'tab02',
        },
        {
          icon: 'icon-choose01',
          text: 'tab03',
          badgeDot: true
        }
      ],
      currentIndex: 0,

    };
  },
  //方法集合
  methods: {

  }
}
</script>
<style lang='less' scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50upx;
  align-items: center;
  border-top:1upx solid rgba(0, 0, 0, 0.33);
  z-index: 99;
  .tabbar-warp {
    .navigator {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        image {
          width: 24upx;
          height: 24upx;
        }
      }
      .text {
        color: rgb(183, 183, 183);
      }
    }
    .active {
      transform: scale(1.1);
    }
  }
}
</style>