xdd-uniapp-new/components/xdd-tabbar/index.vue

<template>
  <view
    :style="{
      'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
    }"
    class="xdd-tabbar-wrap"
  >
    <view class="center-img" id="quweiIcon" @click="switchTabFn('/pages/cloud/haveFun')">
      <image
        :src="webUrl + '/home/tabbar-center.png'"
        class="img"
      />
      <view
        :class="currIndex === 4 ? 'curr' : ''"
        class="name"
      >吃喝玩乐</view>
    </view>
    <view class="tabbar-list">
      <view
        v-for="(tabbarItem, tabbarIndex) in tabbar"
        :key="tabbarIndex"
        class="tabbar-item"
      >
        <view
          v-for="(item, index) in tabbarItem"
          :key="index"
          :class="currIndex === item.index ? 'curr' : ''"
          :id="'icon' + index"
          class="item"
          @click="gotoPage(item.url, item.type, item.index)"
        >
          <view class="img-wrap">
            <!-- 预加载两张图片，可以在点击切换的时候不闪屏 -->
            <image
              :src="item.onIcon"
              class="img on"
            />
            <image
              :src="item.offIcon"
              class="img off"
            />
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'XddTabbar',
  props: {
    currIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      tabbar: [[
        {
          name: '首页',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
          url: '/pages/home/index',
          type: 1,
          index: 0
        },
        {
          name: '消息',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
          url: '/pkg_common/views/roomLogs',
          type: 2,
          index: 1
        }
      ],[
        {
          name: '购物车',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
          url: '/pages/cart',
          type: 1,
          index: 2
        },
        {
          name: '我的',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
          url: '/pages/user/User/index',
          type: 1,
          index: 3
        }
      ]]
    }
  },
  mounted() {
    this.getElementData('#quweiIcon')
    this.getIconData('#icon1')
  },
  methods: {
    getElementData(el) {
      const query = uni.createSelectorQuery().in(this)
      query.select(el).boundingClientRect().exec((res)=> {
        if(res[0]) {
          this.$emit('getElementData', res[0])
        }
      })
    },
    getIconData(el) {
      const query = uni.createSelectorQuery().in(this)
      query.select(el).boundingClientRect().exec((res)=> {
        if(res[0]) {
          this.$emit('getIcon', res[0])
        }
      })
    },
    /**
     * 跳转至目标页面
     * type: 1-tabbar页面，2-非tabbar页面
    */
    gotoPage(url, type = 1, index) {
      if (this.currIndex === index) return
      if (type === 1) {
        this.switchTabFn(url)
      }
      if (type === 2) {
        uni.navigateTo({ url })
      }
    },
    switchTabFn(url) {
      uni.switchTab({ url })
    }
  }
}
</script>

<style scoped lang="less">
.xdd-tabbar-wrap {
  position: fixed;
  bottom: 21rpx;
  left: 21rpx;
  right: 21rpx;
  z-index: 99;
  height: 164rpx;
  background-size: 708rpx 164rpx;
  background-repeat: no-repeat;
  .center-img {
    position: absolute;
    top: -20rpx;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    .img {
      width: 136rpx;
      height: 136rpx;
    }
    .name {
      text-align: center;
      font-size: 24rpx;
      color: #9a9a9a;
      transform: translateY(-4rpx);
      &.curr {
        color: #C52733;
      }
    }
  }
  .tabbar-list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 70rpx 0 0 0;
    .tabbar-item {
      display: flex;
      align-items: center;
      width: calc(50% - 78rpx);
      .img-wrap {
        .img {
          display: block;
          width: 44rpx;
          height: 44rpx;
          margin: 0 auto;
          &.on {
            display: none;
          }
          &.off {
            display: block;
          }
        }
      }
      .name {
        padding: 10rpx 0 0 0;
        text-align: center;
        font-size: 24rpx;
        color: #9a9a9a;
      }
      .item {
        width: 140rpx;
        &.curr {
          .name {
            color: #C52733;
          }
          .on {
            display: block;
          }
          .off {
            display: none;
          }
        }
      }
    }
  }
}
</style>