更新记录

1.0.0（2026-03-25） 下载此版本

• 自定义选项卡组件发布
• 带数字角标
• 可选择显示搜索输入框、更多、加号按钮以及事件回调

平台兼容性

uni-app(4.65)

其他

ziqirj-tab

• 组件名：ziqirj-tab
• 代码块： Tab
• 关联组件：scss/sass, uni-icons

插件说明

• 1、自定义选项卡组件发布
• 2、带数字角标
• 3、可选择显示搜索输入框、更多、加号按钮以及事件回调
• 4、详细使用示例：Gitee

平台支持

使用说明

组件参数

回调函数

使用示例

<template>
    <ziqirj-page-view title="分段器">
        <view class="tabs-box">
            <ziqirj-tab tab-class="_suspension" :tabs="tabs" :current-index="currentTabIndex" @changeTab="changeTab"
                @clickMore="clickMore" @clickAdd="clickAdd"
                :tab-style="{background: 'none', color: '#8D7676'}"
                :selected-tab-style="{background: '#F65347', color: '#ffffff'}" />
        </view>

        <view class="tabs-box">
            <ziqirj-tab tab-class="_suspension" :tabs="tabs" :current-index="currentTabIndex" @changeTab="changeTab"
                @clickMore="clickMore" @clickAdd="clickAdd"
                :searchBox="true"
                :tab-style="{background: 'none', color: '#8D7676'}"
                :selected-tab-style="{background: '#F65347', color: '#ffffff'}" />
        </view>

        <view class="tabs-box">
            <ziqirj-tab tab-class="_suspension" :tabs="tabs" :current-index="currentTabIndex" @changeTab="changeTab"
                @clickMore="clickMore" @clickAdd="clickAdd"
                :searchBox="true" :more="true"
                :tab-style="{background: 'none', color: '#8D7676'}"
                :selected-tab-style="{background: '#F65347', color: '#ffffff'}" />
        </view>

        <view class="tabs-box">
            <ziqirj-tab tab-class="_suspension" :tabs="tabs" :current-index="currentTabIndex" @changeTab="changeTab"
                @clickMore="clickMore" @clickAdd="clickAdd"
                :searchBox="true" :add="true"
                :tab-style="{background: 'none', color: '#8D7676'}"
                :selected-tab-style="{background: '#F65347', color: '#ffffff'}" />
        </view>

        <!-- #ifdef H5 -->
        <view class="safety-h"></view>
        <!-- #endif -->
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {
                tabs: [
                    { value: 0, label: '未使用', count: 1 },
                    { value: 1, label: '已使用' },
                    { value: 2, label: '已过期' }
                ],
                currentTabIndex: 0
            }
        },
        methods: {
            changeTab(e) {
                this.currentTabIndex = e.index
                console.log("changeTab", e)
            },
            clickMore() {
                console.log("clickMore")
            },
            clickAdd() {
                console.log("clickAdd")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tabs-box {
        width: calc(100% - 30px);
        padding: 15px;
        background-color: #faf4f2;
    }
</style>

依赖组件

scss/sass

uni-icons

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

紫琪程序猿