custom-tab-bar2.uvue

<template>
  <view class="tabs">
    <view class="tab-view">
      <tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
      <tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
    </view>
    <view ref="tabbar" class="tab-bar">
      <view class="tab-item">
        <view ref="tab-item1" class="tab-item-content" @click="onTabClick(0)">
          <text class="tab-item-icon uni-icon"
            :class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
          <text class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
            列表
          </text>
        </view>
      </view>
      <view>
        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
        <view class="btn-plus">
          <text class="btn-plus-text">+</text>
        </view>
      </view>
      <view class="tab-item">
        <view ref="tab-item2" class="tab-item-content" @click="onTabClick(1)">
          <text class="tab-item-icon uni-icon"
            :class="selectedIndex==1 ? 'tab-item-text-active' : ''">{{'\ue699'}}</text>
          <text class="tab-item-text" :class="selectedIndex==1 ? 'tab-item-text-active' : ''">
            我的
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import tab1 from './custom-tab-bar2-tab1.uvue';
  import tab2 from './custom-tab-bar2-tab2.uvue';

  type TabItem = {
    init : boolean,
    preload : boolean,
  }

  export default {
    components: {
      tab1,
      tab2
    },
    data() {
      return {
        tabList: [
          {
            init: false
          } as TabItem,
          {
            init: false
          } as TabItem,
        ] as TabItem[],
        selectedIndex: -1
      }
    },
    onReady() {
      this.setSelectedIndex(0)
    },
    methods: {
      onTabClick(index : number) {
        this.setSelectedIndex(index);
        if (index == 0) {
          (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
        }
      },
      onTabPageEvent(top : number) {
        const tabItem1 = this.$refs["tabs-item1"] as Element
        const angle = top < 50 ? '0deg' : '180deg'
        tabItem1.style.setProperty('transform', `rotate(${angle})`)
      },
      setSelectedIndex(index : number) {
        if (this.selectedIndex === index) {
          return
        }
        if (!this.tabList[index].init) {
          this.tabList[index].init = true
        }
        this.selectedIndex = index
      }
    }
  }
</script>

<style>
  @font-face {
    font-family: "UniIcon";
    src: url('@/static/fonts/uni-icon.ttf');
  }

  .uni-icon {
    font-family: "UniIcon";
    font-size: 16px;
    font-style: normal;
  }

  .tabs {
    flex: 1;
    background-color: #fff;
    overflow: visible;
  }

  .tab-view {
    flex: 1;
  }

  .tab-view-item {
    flex: 1;
  }

  .tab-bar {
    flex-direction: row;
    height: 56px;
    overflow: visible;
  }

  .tab-item {
    flex: 1;
    position: relative;
    background-color: #1e90ff;
    overflow: visible;
  }

  .tab-item-content {
    margin: auto;
  }

  .tab-item-icon {
    color: #ccc;
    font-size: 12px;
    text-align: center;
    margin-bottom: 4px;
  }

  .tab-item-text {
    color: #ccc;
    font-size: 12px;
    text-align: center;
  }

  .tab-item-text-active {
    color: #fff;
  }

  .concave-image {
    width: 115px;
    height: 56px;
  }

  .btn-plus {
    position: absolute;
    left: 23px;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    background-color: #FE5722;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .btn-plus-text {
    color: #fff;
    font-size: 32px;
  }
</style>