更新记录

1.0.1（2025-08-09）

优化细节

1.0.0（2025-08-05）

初始版本

平台兼容性

云端兼容性

uni-app x(4.25)

yzc-custom-tabbar uniappx自定义tabbar，支持添加中间按钮，支持tabbar点击动画（需要配合lottie动画）

注意：使用需要导入uni-animation-view插件

使用示例（具体参考示例项目）

<template>
  <view class="wrapper"> 
        <!-- tab视图容器 -->
        <view class="tabview">
          <Tab1 ref="tab0" class="tab-page" :tabIdx="0" v-if="tabList[0].init!" :style="{visibility:(selectedIndex==0?'visible':'hidden')}"></Tab1>
          <Tab2 ref="tab1" class="tab-page" :tabIdx="1" v-if="tabList[1].init!" :style="{visibility:(selectedIndex==1?'visible':'hidden')}"></Tab2>
          <Tab3 ref="tab2" class="tab-page" :tabIdx="2" v-if="tabList[2].init!" :style="{visibility:(selectedIndex==2?'visible':'hidden')}"></Tab3>
          <Tab4 ref="tab3" class="tab-page" :tabIdx="3" v-if="tabList[3].init!" :style="{visibility:(selectedIndex==3?'visible':'hidden')}"></Tab4>
        </view>
        <!-- tabbar -->
        <yzc-custom-tabbar 
        ref="tabbar"
        :tabList="tabList"
        backgroundColor="#fff"
        normalTextColor="#ccc"
        selectedTextColor="#000"
        font-size="12px"
        :showCenterBtn="true"
        centerImageUrl="/static/logo.png"
        :showLottie="true"
        @willChangeIndex="willChangeIndex"
        @pageShow="tabClickPageShow"
        @pageHide="tabClickPageHide"
        @tabBarIndexChanged="tabBarIndexChanged"
        @plusClick="onPlusClick"
        >
        </yzc-custom-tabbar>
  </view>
</template>

<script lang="uts">
  import Tab1 from '@/pages/tabpages/tab1.uvue'
  import Tab2 from '@/pages/tabpages/tab2.uvue'
  import Tab3 from '@/pages/tabpages/tab3.uvue'
  import Tab4 from '@/pages/tabpages/tab4.uvue'
  import { TabItem } from '@/uni_modules/yzc-custom-tabbar/components/yzc-custom-tabbar/yzc-custom-tabbar.uvue'
  import YzcCustomTabbar from '@/uni_modules/yzc-custom-tabbar/components/yzc-custom-tabbar/yzc-custom-tabbar.uvue'
  export default {
    components: {
      Tab1,
      Tab2,
      Tab3,
      Tab4,
      YzcCustomTabbar
    },
    data() {
      return {
        tabList: [
          {
            init: true,
            preload: false,
            iconPath: '../../static/tabbar/tabbar1_normal.png',
            selectedIconPath: '../../static/tabbar/tabbar1_selected.png',
            text: "首页",
            lottiePath: '/static/lottie/tabbar1.json'
          } as TabItem,
          {
            init: false,
            preload: false,
            iconPath: '../../static/tabbar/tabbar2_normal.png',
            selectedIconPath: '../../static/tabbar/tabbar2_selected.png',
            text: "消息",
            lottiePath: '/static/lottie/tabbar2.json'
          } as TabItem,
          {
            init: false,
            preload: false,
            iconPath: '../../static/tabbar/tabbar3_normal.png',
            selectedIconPath: '../../static/tabbar/tabbar3_selected.png',
            text: "分析",
            lottiePath: '/static/lottie/tabbar3.json'
          } as TabItem,
          {
            init: false,
            preload: false,
            iconPath: '../../static/tabbar/tabbar4_normal.png',
            selectedIconPath: '../../static/tabbar/tabbar4_selected.png',
            text: "我的",
            lottiePath: '/static/lottie/tabbar4.json'
          } as TabItem
        ] as TabItem[],
        selectedIndex: 0,
        isLogin: false,
        pushLoginVC: true,
        willIndex: -1,
      }
    },
    created() {
        uni.$on('loginStatusChange', (res: UTSJSONObject) => {
            if (res['status'] == 'loginSuccess') {
                console.log('登录成功')
                if (this.willIndex != -1) {
                    (this.$refs['tabbar'] as ComponentPublicInstance).$callMethod('sureSelectedIndex', this.willIndex)
                    this.willIndex = -1
                }
                this.isLogin = true
            } else {
                this.isLogin = false
            }
        })
    },
    destroyed() {
        uni.$off('loginStatusChange')
    },
    onShow() {
        this.pushLoginVC = false
        this.willIndex = -1

        // 测试
        setTimeout(() => {
            this.setBadgeNumber(1, 9)
        }, 3000)
    },
    methods: {
        setBadgeNumber(index: number, num: number) {
            (this.$refs['tabbar'] as ComponentPublicInstance).$callMethod('setBadgeNumber', index, num);       
        },
        tabClickPageShow(index: number) {
            (this.$refs['tab' + index]! as ComponentPublicInstance).$callMethod('pageShow') 
        },
        tabClickPageHide(index: number) {
            (this.$refs['tab' + index]! as ComponentPublicInstance).$callMethod('pageHide')
        },
        tabBarIndexChanged(index: number) {
            this.selectedIndex = index
        },
        onPlusClick() {
            console.log('点击了确定按钮')
        },
        willChangeIndex(index: number) {
            if (index != 3 || this.isLogin) {
                this.willIndex = -1;
                (this.$refs['tabbar'] as ComponentPublicInstance).$callMethod('sureSelectedIndex', index);
            } else {
                this.willIndex = index
                this.pushLoginVC = true
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
        }
    },
    mounted() {
    }
}
</script>

<style lang="scss">
.wrapper {
   width: 100%;
   height: 100%;
   overflow: hidden; 
   position: relative;
}
.tabview {
    flex: 1;
    .tab-page {
      position: absolute;
      width: 100%;
      height: 100%;
    }
}
</style>