更新记录

1.0.0（2025-09-10） 下载此版本

• 自定义TabBar组件1.0.0版本发布
• 支持样式：_default、_suspension
• 支持数字角标显示
• 支持双击事件
• 插槽位传入对应页面组件

平台兼容性

uni-app(4.65)

uni-app x(4.65)

其他

ziqirj-tabbar

• 组件名：ziqirj-tabbar
• 代码块： TabBar
• 关联组件：scss/sass, ziqirj-tabbar-page

插件说明

• 1、自定义TabBar组件1.0.0版本发布
• 2、支持样式：_default、_suspension
• 3、支持数字角标显示
• 4、支持双击事件
• 5、插槽位传入对应页面组件
• 6、默认导航栏高度：60px
• 7、详细使用示例：Gitee

平台支持

使用说明

组件参数

回调函数

插槽

使用示例

<template>
    <!-- _default、_suspension -->
    <ziqirj-tabbar ref="ziqirjTabbarRef" :pages="pages" :current-page="currentPage" @safetyHeight="safetyHeight"
        tab-class="_default" @switchTab="switchTab" @dbClick="dbClick">
        <page1 v-show="currentPage === 'pages/TabBar/tabbar/page1'" ref="page1Ref" />
        <page2 v-show="currentPage === 'pages/TabBar/tabbar/page2'" ref="page2Ref" />
        <page3 v-show="currentPage === 'pages/TabBar/tabbar/page3'" ref="page3Ref" />
        <page4 v-show="currentPage === 'pages/TabBar/tabbar/page4'" ref="page4Ref" />
    </ziqirj-tabbar>
</template>

<script>
    import Page1 from './page1.vue'
    import Page2 from './page2.vue'
    import Page3 from './page3.vue'
    import Page4 from './page4.vue'

    export default {
        components: { Page1, Page2, Page3, Page4 },
        data() {
            return {
                pages: [
                    { 
                        pagePath: "pages/TabBar/tabbar/page1", 
                        iconPath: require('@/static/tabbar/home.png'), 
                        selectedIconPath: require('@/static/tabbar/home_.png'), 
                        text: "首页",
                        count: 1
                    }, { 
                        pagePath: "pages/TabBar/tabbar/page2", 
                        iconPath: require('@/static/tabbar/att.png'), 
                        selectedIconPath: require('@/static/tabbar/att_.png'), 
                        text: "Tab1",
                        count: 99
                    }, { 
                        pagePath: "pages/TabBar/tabbar/page3", 
                        iconPath: require('@/static/tabbar/work.png'), 
                        selectedIconPath: require('@/static/tabbar/work_.png'), 
                        text: "Tab2",
                        count: 100
                    }, { 
                        pagePath: "pages/TabBar/tabbar/page4", 
                        iconPath: require('@/static/tabbar/mine.png'), 
                        selectedIconPath: require('@/static/tabbar/mine_.png'), 
                        text: "Tab3",
                        count: 0
                    }
                ],
                currentPage: null,
                topBtn: false,
                tabHeight: 0
            }
        },
        onLoad() {

        },
        mounted() {
            this.switchTab({ currentPage: 'pages/TabBar/tabbar/page1'})
        },
        methods: {
            safetyHeight(e) {
                this.tabHeight = e.tabHeight
            },
            switchTab(e) {
                this.currentPage = e.currentPage

                if (e.activateTab) {
                    return
                }
                this.renderPage()
            },
            dbClick(e) {
                this.renderPage()
            },
            renderPage() {
                this.$nextTick(() => {
                    switch(this.currentPage) {
                        case 'pages/TabBar/tabbar/page1':
                            this.$refs.page1Ref.refresh()
                            break
                        default:
                            break
                    }
                })
            },
            toTop() {
                this.$refs.ziqirjTabbarRef.toTop()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ziqirj-tabbar {
        position: fixed;
        bottom: 0;

        &._default {

        }
    }

</style>

依赖组件

scss/sass

子组件：ziqirj-tabbar-page

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿