更新记录

1.0.2（2024-11-18） 下载此版本

修复文档。

1.0.1（2024-11-18） 下载此版本

修复问题。

1.0.0（2024-11-15） 下载此版本

ljs-tabs，tabs组件。

平台兼容性

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

简介

ljs-tabs，tabs组件。可自定义tab样式及内部展示元素。

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-tabs组件。

主参数

opts参数

插槽

快速应用

示例1

<ljs-tabs
    :data="data"
    :opts="{
        fontActiveColor: 'red',
    }"
    @clickItem="clickItem">
    <!-- #ifdef MP-WEIXIN -->
    <template v-slot:default="{row}">
        <view class="item">
            <view class="title">{{ row.title }}</view>
        </view>
    </template>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <template #default="scope">
        <view class="item">
            <view class="title">{{ scope.row.title }}</view>
            <!-- <view class="num">{{ scope.row.num }}</view> -->
        </view>
    </template>
    <!-- #endif -->
</ljs-tabs>

export default {
    data() {
        return {
            data: [
                {
                    title: '关注',
                },
                {
                    title: '推荐',
                },
                {
                    title: '科技',
                },
                {
                    title: '音乐',
                },
                {
                    title: '美食',
                },
                {
                    title: '文化',
                },
                {
                    title: '经济',
                },
                {
                    title: '体育',
                },
                {
                    title: '娱乐',
                },
            ]
        },
        methods: {
            clickItem(row, index) {
                console.log('点击', row, index);
            },
        }
    }
}

示例2

<ljs-tabs
    :data="data"
    :opts="{
        fontActiveColor: 'red',
        itemPadding: '20rpx 10rpx',
    }"
    @clickItem="clickItem">
    <!-- #ifdef MP-WEIXIN -->
    <template v-slot:default="{row}">
        <view class="item">
            <view class="title">{{ row.title }}</view>
            <view class="num" v-if="row.num > 0">{{ row.num }}</view>
        </view>
    </template>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <template #default="scope">
        <view class="item">
            <view class="title">{{ scope.row.title }}</view>
            <view class="num" v-if="scope.row.num > 0">{{ scope.row.num }}</view>
        </view>
    </template>
    <!-- #endif -->
</ljs-tabs>

export default {
    data() {
        return {
            data: [
                {
                    title: '关注',
                    num: 0,
                },
                {
                    title: '推荐',
                    num: 9,
                },
                {
                    title: '科技',
                    num: 0,
                },
                {
                    title: '音乐',
                    num: 0,
                },
                {
                    title: '美食',
                    num: 0,
                },
                {
                    title: '文化',
                    num: 0,
                },
            ]
        },
        methods: {
            clickItem(row, index) {
                console.log('点击', row, index);
            },
        }
    }
}

.item{
    display: flex;
    align-items: center;
    justify-content: center;
    .num{
        width: 30upx;
        height: 30upx;
        background-color: red;
        border-radius: 50%;
        color: #FFF;
        font-size: 20upx;
        margin-left: 6upx;
    }
}

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。