kxmall-ui/kxmall-rider-ui/components/tab-bar.vue

<template>
  <view class="tab-bar-wrapper">
    <view class="tab-bar">
      <view class="tab-item" :class="{active:active===0}" @click="onClick(0)">
        <view class="image">

        </view>
        <view class="text">
          首页
        </view>
      </view>
      <view class="tab-item" :class="{active:active===1}" @click="onClick(1)">
        <view class="image">

        </view>
        <view class="text">
          我的
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TabBar',
    props: {
      active: {
        type: Number,
        default: 0
      }
    },
    methods: {
      onClick(i) {
        i !== this.active &&
          uni.redirectTo({
            url: i === 0 ? '/pages/task/task1' : '/pages/user/user1',
            fail(e) {
              console.log(e)
            },
            complete(e) {
              console.log(e)
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab-bar-wrapper {
    height: 100rpx;
    position: fixed;
    left: var(--window-left);
    right: var(--window-right);
    bottom: 0;
    color: #C0C4CC;
    background-color: #fff;
    font-size: 20rpx;
  }

  .tab-bar {
    display: flex;
  }

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .image {
      width: 48rpx;
      height: 48rpx;
      background-image: url('../static/tabbar/home.png');
      background-size: cover;
    }
  }

  .tab-item:nth-child(2) {
    .image {
      background-image: url('../static/tabbar/mine.png');
    }
  }

  .tab-item.active {
    color: #000;

    .image {
      background-image: url('../static/tabbar/home_active.png');
    }
  }

  .tab-item:nth-child(2).active {
    .image {
      background-image: url('../static/tabbar/mine_active.png');
    }
  }
</style>