[vue] tabbar 的切换

  要求：tab栏切换，样式的改动

方法一：

   HTML:

    <div class="gszyPreferentialRate-tabbar">
      <div class="background"></div>
      <div :class="['gszyPreferentialRate-tabbar-item',{ 'actived': index == tabbarIndex }]" v-for="(item, index) in tabbar" :key="index" @click="chooseTab(index)">{{ item.name }}</div>
    </div >

CSS:

  .gszyPreferentialRate-tabbar{
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    .background{
      position: absolute;
      width: 100%;
      height: 46px;
      bottom: 0;
      left: 0;
      background: linear-gradient(to bottom, #F9FEF6, #E2EDD0);
      z-index: -1;
    }
    .gszyPreferentialRate-tabbar-item{
      width: 33%;
      text-align: center;
      height: 46px;
      line-height: 46px;
      color: #333333;
      font-weight: 700;
    }
    .actived{
      height: 54px;
      line-height: 54px;
      color: #86AE11;
      font-size: 22px;
      background: url("../../assets/image/tabbar_bg.png") no-repeat;
      background-size: 100% 100%;
    }
  }

JS:

data:{
        tabbar: [
      {
        name: '666'
      },
      {
        name: '777'
      },
      {
        name: '888'
      }
    ],
    tabbarIndex: 0,
}


methods: {
    // tabbar点击
    chooseTab (index) {
      this.tabbarIndex = index
    }
}