更新记录

1.0.1(2021-01-09)

  • 增加获取当前激活分类方法
  • 增加reload方法

1.0.0(2021-01-09)

1.0.0(2021-01-09)

初始化插件

查看更多

categories

uni-app仿美团分类组件,可用于商品分类等。

组件使用方式

long-categories 复制到 uni-app项目中的 components目录即可

<template>
    <view class="content">
        <view>
            <view class="">
                <view>最多选 {{ max }} 个</view>
                <view>已选 {{ count }} 个</view>
            </view>
            <long-categories
                :list="list"
                :maxSelected="max"
                @change="change"
            >
            </long-categories>
        </view>
    </view>
</template>


    export default {
        data() {
            return {
                list: [],
                count: 0,
                max: 10
            }
        },
        onLoad() {
            this.init()
        },
        methods: {
            init () {
                for (let i = 0; i < 10; i++) {
                    let item = {
                        id: `c-${ i }`,
                        name: `分类-${ i }`,
                        children: [],
                        selectedIds: {}
                    }
                    for (let j = 0; j < 10; j++) {
                        item.children.push({
                            id: `item-${ i }-${ j }`,
                            name: `元素${ j }`,
                            disabled: ( j > 2 && j < 5),
                            checked: false
                        })
                    }
                    this.list.push(item)
                }
            },
            change (data) {
                this.count = data.length
                console.log(data)
            }
        }
    }

list数据结构

名称 类型 说明
id String 数据唯一标志,可根据需要更改
name String 左侧分类显示名称,可根据需要修改
selectedIds Object 存放右侧选择的元素id
children Array 右侧分类列表,详细数据结构见 children结构描述

children数据结构

名称 类型 说明
id String 元素唯一标志
name String 元素显示名称,可根据需要修改
disabled Boolean 元素是否可选中
checked Boolean 元素是否被选中

属性

名称 类型 默认值 说明
list Array [] 列表数据
maxSelected [String, Number] -1 最大选择数,默认为 -1不限制

事件

名称 返回值 说明
change Array 返回选中的数据数组

方法

名称 说明
getValues() 获取选中的数据数组,和change事件中的数据一致
getActive() 获取当前激活的左侧分类。返回参数:{ index: 当前激活的索引, data: 当前激活的分类数据 }
reload() 重新计算位置高度信息,用于动态添加数据导致定位不准确问题

使用示例

详细代码 Demo

插件截图

img

img

img

PS:如有问题可联系QQ(1365763165)或者提issure,如果帮到你了还请不要吝啬给个 Star

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问