ruoyi-miniapp/uni_modules/s-components/s-tabber/index.vue

<template>
  <view :class="setClass">
    <view class="tabber" v-if="isTab">
      <view
        :class="{ tab: true, isActive: tab.code == selected }"
        v-for="(tab, index) in tabbers"
        :key="index"
        @click="changeTab(tab)"
      >
        <u--image
          :src="selected == tab.code ? tab.selectIcon : tab.icon"
          width="42px"
          height="42px"
          v-if="tab.type == 'middle'"
        ></u--image>
        <u--image :src="selected == tab.code ? tab.selectIcon : tab.icon" width="24px" height="24px" v-else></u--image>
        <view class="name">
          {{ tab.name }}
        </view>
      </view>
    </view>
    <view class="fit-content"></view>
  </view>
</template>

<script>
export default {
  props: {
    selected: Number,
    isTab: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabbers: [
        {
          name: '首页',
          path: '/pages/index',
          icon: '/static/images/tabbers/home.png',
          selectIcon: '/static/images/tabbers/home-select.png',
          code: 0
        },
        {
          name: '任务',
          path: '/pages/task',
          icon: '/static/images/tabbers/task.png',
          selectIcon: '/static/images/tabbers/task-select.png',
          code: 1
        },
        {
          name: '',
          path: '/pages/chat',
          icon: '/static/images/tabbers/chat.png',
          selectIcon: '/static/images/tabbers/chat-select.png',
          type: 'middle',
          code: 2
        },
        {
          name: '企业',
          path: '/pages/enterprise',
          icon: '/static/images/tabbers/position.png',
          selectIcon: '/static/images/tabbers/position-select.png',
          code: 3
        },
        {
          name: '我的',
          path: '/pages/owner',
          icon: '/static/images/tabbers/user.png',
          selectIcon: '/static/images/tabbers/user-select.png',
          code: 4
        }
      ]
    }
  },
  computed: {
    setClass() {
      return this.$props.isTab ? 'container' : 'noTab'
    }
  },
  methods: {
    changeTab(tab) {
      uni.switchTab({
        url: tab.path,
        success: () => {
          this.isActive = tab.code
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #fff;
  box-shadow: 0 -1px 2px 1px $cs-shadow-color;
}
.noTab {
  // background-color: #fff;
}
.fit-content {
  height: 20px;
}
.tabber {
  height: 60px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  .tab {
    transition: 0.2s all;
  }
  .isActive {
    color: #22c55e;
  }
}
</style>