更新记录

1.0.1（2024-06-18）

修改实例代码

1.0.0（2024-06-18）

1.0.0

平台兼容性

使用说明

1.注册组件后直接使用，支持自定义列表内容。 2.该插件使用的预编译，需要自行安装scss/sass插件 3.如果发现组件有bug或者不完善可以留言交流。 4.该插件只支持vue2中使用，不支持在nvue中使用，hbuilderX 最好是更新到较新版本 5.使用时注意标签的个数和内容泪飙的个数保持一致

支持的平台

H5、app、微信小程序

使用方式

import zhCustomTabs from '@/components/zh-custom-tabs/zh-custom-tabs/zh-custom-tabs.vue';

在页面中使用组件

import zhCustomTabs from '@/components/zh-custom-tabs/zh-custom-tabs/zh-custom-tabs.vue';

<zhCustomTabs :tabs_list="list" :list="list" :current.sync="current" @click="clickTabs">
    <template #listItem="{ row,index }">
        <view class="goods">支持自定义内容{{ index }}</view>
    </template>
</zhCustomTabs>

参数说明

Methods

事件

示例

<template>
    <view class="">
        <zhCustomTabs :tabs_list="list" :list="list" :current.sync="current" @click="clickTabs">
            <template #listItem="{ row,index }">
                <view class="goods">支持自定义内容{{ index }}</view>
            </template>
        </zhCustomTabs>
    </view>
</template>

<script>
    import zhCustomTabs from '@/components/zh-custom-tabs/zh-custom-tabs/zh-custom-tabs.vue';
    export default {
        components: {
            zhCustomTabs
        },
        data() {
            return {
                list: [{
                        id: 1,
                        name: '苹果'
                    },
                    {
                        id: 2,
                        name: '香蕉'
                    },
                    {
                        id: 3,
                        name: '西瓜'
                    },
                    {
                        id: 4,
                        name: '菠萝'
                    },
                    {
                        id: 5,
                        name: '石榴'
                    },
                    {
                        id: 6,
                        name: '榴莲'
                    },
                    {
                        id: 7,
                        name: '香橙'
                    },
                    {
                        id: 8,
                        name: '黄桃'
                    }
                ],
                current: 0
            };
        },
        methods: {
            clickTabs(e) {
                console.log(e);
            }
        },
    };
</script>

<style lang="scss" scoped>
    .goods {
        height: 300rpx;
        background-color: rgba(60, 156, 255, 0.1);
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
    }
</style>

----- 别忘记点赞哟，您的肯定就是对我最大的支持 END ----- 如果任何疑问的可以在评论区留言，还可以加ZhangHaoqwezxc,我尽量解决。