custom-tab-bar.uvue

<template>
  <view class="custom-tab-bar">
    <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 class="tab-bar">
      <view class="tab-item" @click="onTabClick(0)">
        <view ref="tab-item1" class="tab-item-content">
          <text class="tab-item-icon tab-item-icon1 uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
            {{'\ue6be'}}
          </text>
        </view>
      </view>
      <view class="tab-item" @click="onTabClick(1)">
        <view ref="tab-item2" class="tab-item-content">
          <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 { ComponentPublicInstance } from 'vue';
  import tab1 from './custom-tab-bar-tab1.uvue';
  import tab2 from './custom-tab-bar-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
      }
    },
    onLoad() {
      uni.$on('tabchange', this.onTabPageEvent)
    },
    onUnload() {
      uni.$off('tabchange', this.onTabPageEvent)
    },
    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["tab-item1"] as Element
        const angle = top < 50 ? 0 : 180
        tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
      },
      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: 18px;
    font-style: normal;
  }

  .custom-tab-bar {
    flex: 1;
  }

  .tab-view {
    flex: 1;
  }

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

  .tab-bar {
    background-color: #f0f0f0;
    border-top: 1px solid #dbdbdb;
    flex-direction: row;
    height: 56px;
  }

  .tab-item {
    flex: 1;
  }

  .tab-item-content {
    margin: auto;
    transition: transform 0.3s;
  }

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

  .tab-item-text {
    color: #555;
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
  }

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

  .tab-item-icon1 {
    font-size: 30px !important;
    font-weight: bold;
  }
</style>