更新记录

1.0.1（2023-04-26）

  1. 修复已知BUG
  2. 兼容微信的初始化方式
  3. 新增清空选项方法

1.0.0（2023-04-25）

1.0.0

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

温馨提示：开启动画可能会在快速滑动的时候造成定位不准确。

第一步，引用组件

import DyCategoryGanged from '@/components/dy-category-ganged'

第二步，注册组件

components: {
    DyCategoryGanged
}

注意： 1：组件大小由父级容器大小控制。 2：在微信小程序里面，如果在弹窗使用，需要在组件渲染之后手动调用init方法。

微信小程序兼容写法

// 在微信小程序的弹窗里面使用，需要给组件指定ref，并在弹窗打开的时候时候执行 this.$refs.xxx.init();
this.$refs.xxx.init();

HTML - 直接使用

<dy-category-ganged v-model="value" :data="dyCategoryGangedData" :scrollWithAnimation="true"
                :multiple="true" :options="options" dyCategoryGangedTypeItemClass="activeTest">
</dy-category-ganged>

HTML - 插槽无需兼容微信写法

<dy-category-ganged v-model="value" :data="dyCategoryGangedData" :scrollWithAnimation="true"
                :multiple="true" :options="options" dyCategoryGangedTypeItemClass="activeTest">
    <!--  #ifndef MP-WEIXIN -->
    <view class="typeTitleTest" slot="type" slot-scope="{item,index}">{{item[options.typeTitle]}}</view>
    <view class="minTypeTitleTest" slot="minTypeTitle" slot-scope="{item,index}">
        {{item[options.minTypeTitle]}}
    </view>
    <view class="contentTest" slot="content" slot-scope="{itemChild,indexChild}">
        {{itemChild[options.content]}}
    </view>
    <!--  #endif -->
</dy-category-ganged>

HTML - 插槽只兼容微信写法

<dy-category-ganged v-model="value" :data="dyCategoryGangedData" :scrollWithAnimation="true"
                :multiple="true" :options="options" dyCategoryGangedTypeItemClass="activeTest">
    <!-- 只在微信小程序编译 -->
    <!--  #ifdef MP-WEIXIN -->
    <template v-for="(item,index) in dyCategoryGangedData">
        <view class="typeTitleTest" :slot="'type'+index" :key="index">
            {{item[options.typeTitle]}}
        </view>
        <view class="minTypeTitleTest" :slot="'minTypeTitle'+index" :key="index">
            {{item[options.minTypeTitle]}}
        </view>
        <view class="contentTest" :slot="'content'+index+indexChild"
            v-for="(itemChild,indexChild) in item[options.childrens]" :key="index">
            {{itemChild[options.content]}}
        </view>
    </template>
    <!--  #endif -->
</dy-category-ganged>

HTML - 插槽所有端兼容写法

<dy-category-ganged v-model="value" :data="dyCategoryGangedData" :scrollWithAnimation="true"
                :multiple="true" :options="options" dyCategoryGangedTypeItemClass="activeTest">
    <!-- 只在微信小程序编译 -->
    <!--  #ifdef MP-WEIXIN -->
    <template v-for="(item,index) in dyCategoryGangedData">
        <view class="typeTitleTest" :slot="'type'+index" :key="index">
            {{item[options.typeTitle]}}
        </view>
        <view class="minTypeTitleTest" :slot="'minTypeTitle'+index" :key="index">
            {{item[options.minTypeTitle]}}
        </view>
        <view class="contentTest" :slot="'content'+index+indexChild"
            v-for="(itemChild,indexChild) in item[options.childrens]" :key="index">
            {{itemChild[options.content]}}
        </view>
    </template>
    <!--  #endif -->

    <!-- 除微信小程序以外编译 -->
    <!--  #ifndef MP-WEIXIN -->
    <view class="typeTitleTest" slot="type" slot-scope="{item,index}">{{item[options.typeTitle]}}</view>
    <view class="minTypeTitleTest" slot="minTypeTitle" slot-scope="{item,index}">
        {{item[options.minTypeTitle]}}
    </view>
    <view class="contentTest" slot="content" slot-scope="{itemChild,indexChild}">
        {{itemChild[options.content]}}
    </view>
    <!--  #endif -->
</dy-category-ganged>

Props

参数 类型 默认值 可选值 说明
v-model Array/Object [] / 多选为数组，单选为对象
data Array [] / 渲染数据，数据结构见下方
options Object 见下方 / 字段配置项
scrollWithAnimation Boolean false true/false 是否启用滚动动画
dyCategoryGangedTypeItemClass String active / 左侧类别自定义类名，需注意类别权重，可使用 !important
class String / / 自定义类名，需注意类别权重，可使用 /deep/
multiple Boolean false true/false 多选/单选

data数据结构

[
    {
        typeTitle: '分类',
        minTypeTitle: '这是一个小标题',
        childrens: [{content:'内容'}]
    },
    ...
]

Options

字段 默认值 说明
typeTitle typeTitle 左侧类别取值字段名
minTypeTitle minTypeTitle 右侧小标题取值字段名
content content 列表内容取值字段名
childrens childrens 列表子集取值字段名

Events

事件名称 说明 回调参数
select 选中回调 选中项，单选为对象，多选为数组

Function

事件名称 说明
init 初始化，主要用于兼容微信小程序手动初始化，页面渲染后，调用 this.xxx.init()
clear 清空选中项

Slot

字段 说明
type 左侧类别插槽，参数为 item,index，注意：微信小程序没有参数，也不兼容多个同名插槽，需要自行循环
minTypeTitle 右侧小标题插槽，参数为 item,index，注意：微信小程序没有参数，也不兼容多个同名插槽，需要自行循环
content 列表内容插槽，参数为 item,index，注意：微信小程序没有参数，也不兼容多个同名插槽，需要自行循环

完整示例代码

<template>
    <view>
        <view class="box">
            <dy-category-ganged v-model="value" :data="dyCategoryGangedData" :scrollWithAnimation="true"
                :multiple="true" :options="options" dyCategoryGangedTypeItemClass="activeTest">
                <!-- 只在微信小程序编译 -->
                <!--  #ifdef MP-WEIXIN -->
                <template v-for="(item,index) in dyCategoryGangedData">
                    <view class="typeTitleTest" :slot="'type'+index" :key="index">
                        {{item[options.typeTitle]}}
                    </view>
                    <view class="minTypeTitleTest" :slot="'minTypeTitle'+index" :key="index">
                        {{item[options.minTypeTitle]}}
                    </view>
                    <view class="contentTest" :slot="'content'+index+indexChild"
                        v-for="(itemChild,indexChild) in item[options.childrens]" :key="index">
                        {{itemChild[options.content]}}
                    </view>
                </template>
                <!--  #endif -->

                <!-- 除微信小程序以外编译 -->
                <!--  #ifndef MP-WEIXIN -->
                <view class="typeTitleTest" slot="type" slot-scope="{item,index}">{{item[options.typeTitle]}}</view>
                <view class="minTypeTitleTest" slot="minTypeTitle" slot-scope="{item,index}">
                    {{item[options.minTypeTitle]}}
                </view>
                <view class="contentTest" slot="content" slot-scope="{itemChild,indexChild}">
                    {{itemChild[options.content]}}
                </view>
                <!--  #endif -->
            </dy-category-ganged>
        </view>
    </view>
</template>

<script>
    import DyCategoryGanged from '@/components/DyCategoryGanged'
    export default {
        data() {
            return {
                title: 'Hello',
                value: null,
                value1: [],
                dyCategoryGangedData: [],
                options: {
                    typeTitle: "typeTitle",
                    minTypeTitle: "minTypeTitle",
                    childrens: "childrens",
                    content: "content",
                },
            }
        },
        components: {
            DyCategoryGanged,
        },
        onLoad() {
            let _self = this;
            setTimeout(() => {
                // 模拟数据
                for (let i = 0; i < 40; i++) {
                    _self.dyCategoryGangedData.push({
                        typeTitle: '分类' + i,
                        minTypeTitle: '这是一个小分类' + i,
                        childrens: []
                    });
                    let num = parseInt(Math.random() * 10 + 1);
                    for (let j = 0; j < num; j++) {
                        _self.dyCategoryGangedData[i].childrens.push({
                            content: 'content' + i + j
                        });
                    }
                }
            }, 50)
        },
        methods: {

        }
    }
</script>

<style lang="less">
    page {
        height: 100%;
    }

    .box {
        width: 100%;
        height: 500px;
        font-size: 28rpx;

        .activeTest {
            background-color: #f00 !important;
            color: #fff !important;
        }

        /deep/ .typeTitleTest {
            color: #00f;
        }

        /deep/ .minTypeTitleTest {
            color: #f0f;
        }

        /deep/ .contentTest {
            color: #0f0;
        }
    }
</style>

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...