更新记录

0.0.3（2025-07-04） 下载此版本

优化

0.0.2（2025-07-04） 下载此版本

更新细节

0.0.1（2025-07-02） 下载此版本

初次发布

平台兼容性

uni-app(4.15)

其他

声明：本插件的初衷就是简洁！简单！入门级，源码也很简单，可自行修改

H5、APP 、微信小程序 都已自测，正常运行

本组件滚动到最下方有不会立即切换一级分类，有一个过渡效果，继续往下滚动才会切换

使用方法:

template 部分

<cytClassIfy :classifyList="classifyList" :height="0" @clickGoods="onClickGoods"></cytClassIfy>

参数解析:

classifyList： 数据源

height: 组件的整体高度，如果传 0 或不传，组件高度为 windowHeight

script 部分

import cytClassIfy from "@/components/cyt-classify/cyt-classify.vue"

const classifyList = ref([
                    {
            'name': '家电',
            'children': [
                {
                    'name': '冰箱',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '美的',
                        }
                    ]
                },
                {
                    'name': '电视',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '电视机',
                        }
                    ]
                },
                {
                    'name': '空调',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '格力',
                        }
                    ]
                }
            ]
        },
        {
            'name': '手机',
            'children': [
                {
                    'name': 'Xiaomi 数字旗舰',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米13',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米13',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米13',
                        },
                    ]
                },
                {
                    'name': 'Xiaomi MIX系列',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米12',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米12',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米12',
                        }
                    ]
                },
                {
                    'name': 'Xiaomi 手机套装',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米11',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米11',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米11',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米11',
                        }
                    ]
                },
                {
                    'name': 'Xiaomi 红米系列',
                    'goodsList': [
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米10',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米10',
                        },
                        {
                            'goodsImg': 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg?=1613651270',
                            'goodsName': '小米10',
                        }
                    ]
                }
            ]
        }
                ])

const onClickGoods = (item) => {
    uni.showModal({
        title: '提示',
        content: JSON.stringify(item),
        success: ({ confirm, cancel }) => {}
    })
}

此处变量使用 vue3 语法，如果是 vue2，请自行修改为 vue2 的语法即可。

注意：vue2 需要注册组件

components: {
    cytClassIfy
}

H5隐藏滚动条

::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}