zhangsiye/mini/layout/componets/tab.vue

<template>
  <view class="tab">
    <view class="content main-between cross-center">
      <view
        v-for="(item,index) in list"
        :key="index"
        class="tab-item dir-top-wrap cross-center main-center"
        :class="{active: active === index, center: item.center}"
        @click="handleSwitch(index)"
      >
        <view class="icon">
          <image :src="active === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
        </view>
        <text>{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Tab',
  data() {
    return {
      color: '#898E92',
      selectedColor: '#652907',
      list: [
        {
          pagePath: '/pages/groupon/index',
          iconPath: '/static/image/tab/groupon.png',
          selectedIconPath: '/static/image/tab/groupon-HL.png',
          center: false,
          text: '抢爆品'
        },
        {
          pagePath: '/pages/index/index',
          iconPath: '/static/image/tab/member.png',
          selectedIconPath: '/static/image/tab/member-HL.png',
          center: true,
          text: '会员卡'
        },
        {
          pagePath: '/pages/store/index',
          iconPath: '/static/image/tab/store.png',
          selectedIconPath: '/static/image/tab/store-HL.png',
          center: false,
          text: '会员店'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      active: seate => seate.tab.index
    })
  },
  created() {
    this.calc()
  },
  methods: {
    handleSwitch(index) {
      if (index === this.active) {
        return
      }
      this.$store.dispatch('tab/index', index)
      const item = this.list[index]
      uni.switchTab({
        url: item.pagePath
      })
    },
    calc() {
      let active = 1
      const page = uni.$u.page()
      this.list.forEach((obj, index) => {
        if (obj.pagePath === page) {
          active = index
        }
      })
      if (active !== this.active) {
        this.$store.dispatch('tab/index', active)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab{
    position: fixed;
    bottom: 0;
    height: 170rpx;
    width: 100%;
    .content{
      background: url("@/static/image/tab/tab-bg.png") no-repeat bottom;
      height: 160rpx;
      position: absolute;
      bottom: 0;
      width: 100%;
      background-size: 110% 100%;

      .tab-item{
        flex: 1;
        color: #898E92;
        transition: .3s;
        font-size: 24rpx;
        position: relative;
        top: 20rpx;
        &.active{
          color: #652907;
        }
        .icon{
          width: 42rpx;
          height: 42rpx;
          image{
            height: 100%;
            width: 100%;
          }
        }
        &.center{
          position: relative;
          top: 0;
          color: #fff;
          .icon{
            width: 120rpx;
            height: 120rpx;
            image{
              height: 100%;
              width: 100%;
            }
          }
          text{
            position: absolute;
            top: 50%;
            transform: translateY(-67%);
          }
          &:before{
            content: "";
            background: #fff;

          }
        }
      }
    }
  }
</style>