更新记录

1.0.4（2024-10-18）

修复排序模式bug

1.0.3（2024-10-18）

更新demo

1.0.2（2024-09-12）

app demo安装包地址

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue	×	√	√	√	×	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	√	√	√	√	×	√	√	×

next-x-drop-down --超强下拉筛选菜单，多平台测试通过，不支持的平台暂未测试

next-x-drop-down

基于 uni-app 的小程序拖拽组件，可用于 uni-app、mpvue、h5、app-nvue

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

如何使用

下载后放到项目目录中（在 uni-app 中运行到 H5 端需 HBuilderX 2.0 及以上版本）

如果直接通过uni_modules的方式下载，可以不需要单独引入直接在uniapp项目中使用

基本用法(vue3+ts demo)

<template>
    <view style="height:100px;position: relative;box-sizing: border-box;">
        <view style="text-align: center;padding:20rpx;color:#ffb053;"><text>自定义布局样式一</text></view>
        <view style="width: 100%;position: absolute;z-index: 3;top:80rpx">
            <next-x-drop-down :filterData="filterData2" @confirm="confirm"></next-x-drop-down>
        </view>
    </view>
    <view style="height:130px;position: relative;;box-sizing: border-box;">
        <view style="width: 100%;position: absolute;z-index: 2;top:0;">
            <view style="text-align: center;padding:20rpx;color:#ffb053;"><text>自定义布局样式二</text></view>
            <view style="width:92%;margin: 0 auto">
                <next-x-drop-down :filterData="filterData1" @confirm="confirm"></next-x-drop-down>
            </view>
        </view>
    </view>
    <view style="height:100px;position: relative;;box-sizing: border-box;">
        <view style="width: 16%;color:#ffb053;line-height: 80rpx;text-align: center;"><text>样式三</text></view>
        <view style="width: 84%;position: absolute;z-index: 1;top:0;right:0;border:1rpx solid #f0f0f0">
            <next-x-drop-down :filterData="filterData2" @confirm="confirm"></next-x-drop-down>
        </view>
    </view>
</template>
<script>
    import {ref} from 'vue'

    export default {
        setup() {
            // 下拉drop-down 支持的类型： type: radio | filter | single-hierarchy | hierarchy | hierarchy-column | hierarchy-column-multiple | composite
            // 具体配置如下：可根据项目需求进行配置
            const filterData1 = ref([
              {
                name: "价格",
                type: "radio",
                submenu: [
                  {
                    name: "价格区间（元）",
                    submenu: [
                      { name: "1500元以下",value: "0-100",minValue: "",maxValue: "1500",key: "rentPrice", },
                      { name: "1500-2000元",value: "0-100",minValue: "1500",maxValue: "2000",key: "rentPrice", },
                      { name: "2000-2500元",value: "0-100",minValue: "2000",maxValue: "2500",key: "rentPrice", },
                      { name: "2500-3000元",value: "0-100",minValue: "2500",maxValue: "3000",key: "rentPrice", },
                      { name: "3000-4000元",value: "0-100",minValue: "3000",maxValue: "4000",key: "rentPrice", },
                      { name: "4000-5000元",value: "0-100",minValue: "4000",maxValue: "5000",key: "rentPrice", },
                                // 注意如果使用数字区间，可以在对象里面加一个$component属性，并赋予值等于numberRange，
                                // 那么你就会在获取的值中获取到maxValue和minValue两个属性对于区间控件的值
                                { name: "自定义",value: "custom",minValue: "",maxValue: "",$component: "numberRange",  key: "rentPrice", }
                    ],
                  }
                ],
              },
              {
                name: "户型",
                type: "filter",
                submenu: [
                  {
                    name: "户型选择",
                    submenu: [
                      {name: "一室",value: "1",key: "room",},
                      {name: "二室",value: "2",key: "room",},
                      {name: "三室",value: "3",key: "room",},
                      {name: "四室",value: "4",key: "room",},
                      {name: "五室",value: "5",key: "room",},
                      {name: "五室以上",value: "6",key: "room",},
                    ],
                  },
                ],
              },
                {
                    name: "排序",
                    type: "single-hierarchy",
                    submenu: [
                        {
                          name: "按创建时间升序",
                          value: "15",
                        },
                        {
                          name: "按创建时间降序",
                          value: "25",
                        },
                        {
                          name: "按价格高低升序",
                          value: "35",
                        },
                        {
                          name: "按价格高低降序",
                          value: "55",
                        },
                        {
                          name: "按库存高低升序",
                          value: "65",
                        },
                        {
                          name: "按库存高低降序",
                          value: "75",
                        },
                        {
                          name: "按人气高低升序",
                          value: "85",
                        },
                        {
                          name: "按人气高低降序",
                          value: "95",
                        },
                    ]
                },
            ])
            const filterData2 = ref([
                {
                  name: "更多1",
                  type: "hierarchy",
                  submenu: [
                    {
                      name: "地铁",
                      submenu: [
                        {
                          name: "5号线",
                                    submenu: [
                                        {name: "文冲",},
                                        {name: "大沙东",}
                                    ]
                        },
                        {
                          name: "8号线",
                                    submenu: []
                        },
                                {
                                  name: "4号线",
                                    submenu: [
                                        {name: "琶洲",},
                                        {name: "万胜围",}
                                    ]
                                },
                                {
                                  name: "7号线",
                                    submenu: [
                                        {name: "大学城南",},
                                        {name: "大学城北",}
                                    ]
                                },
                      ],
                    },
                    {
                      name: "区域",
                      submenu: [
                        {name: "天河区",},
                        {name: "黄埔区",},
                        {name: "白云区",},
                      ],
                    },
                  ],
                },
              {
                name: "更多2",
                type: "hierarchy-column",
                submenu: [
                  {
                    name: "地铁",
                    submenu: [
                      {
                        name: "5号线",
                                    submenu: [
                                        {name: "文冲",},
                                        {name: "大沙东",}
                                    ]
                      },
                      {
                        name: "8号线",
                                    submenu: []
                      },
                                {
                                  name: "4号线",
                                    submenu: [
                                        {name: "琶洲",},
                                        {name: "万胜围",}
                                    ]
                                },
                                {
                                  name: "7号线",
                                    submenu: [
                                        {name: "大学城南",},
                                        {name: "大学城北",}
                                    ]
                                },
                    ],
                  },
                  {
                    name: "区域",
                    submenu: [
                      {name: "天河区",},
                      {name: "黄埔区",},
                      {name: "白云区",},
                    ],
                  },
                ],
              },
                {
                  name: "更多3",
                  type: "hierarchy-column-multiple",
                  submenu: [
                    {
                      name: "地铁",
                      submenu: [
                        {
                          name: "5号线",
                                    submenu: [
                                        {name: "文冲",},
                                        {name: "大沙东",}
                                    ]
                        },
                                {
                                  name: "4号线",
                                    submenu: [
                                        {name: "琶洲",},
                                        {name: "万胜围",}
                                    ]
                                },
                                {
                                  name: "7号线",
                                    submenu: [
                                        {name: "大学城南",},
                                        {name: "大学城北",}
                                    ]
                                },
                      ],
                    },
                    {
                      name: "区域",
                      submenu: [
                        {name: "天河区",},
                        {name: "黄埔区",},
                        {name: "白云区",},
                      ],
                    },
                  ],
                },
                {
                    name: "自定义",
                    type: "composite",
                    submenu: [
                        {
                            name: "输入控件",
                            $component: 'input',
                            $componentProps: {
                                prefix: '#', // 输入框前置文字
                                suffix: '单元',   // 输入框后置文字
                                placeholder: '多个单元用逗号/顿号隔开，例如1，2'
                            },
                            key: 'unitNames',
                            $value: ''
                        }, {
                            name: "多选+区间控件",
                            $component: 'checkbox',
                            $componentProps: {
                                options: [
                                    {
                                        label: '低楼层',
                                        value: 'a',
                                        minValue: "1",
                                        maxValue: "3",
                                        key: 'houseFloorNameList',
                                    },
                                    {
                                        label: '中楼层',
                                        value: 'b',
                                        minValue: "4",
                                        maxValue: "10",
                                        key: 'houseFloorNameList',
                                    },
                                    {
                                        label: '高楼层',
                                        value: 'c',
                                        minValue: "11",
                                        maxValue: "",
                                        key: 'houseFloorNameList',
                                    },
                                    {
                                        label: '自定义',
                                        value: '$numberRange',
                                        minValue: "",
                                        maxValue: "",
                                        key: 'houseFloorNameList',
                                    }
                                ]
                            },
                            $value: []
                        }, {
                            name: "单选+区间控件",
                            $component: 'checkbox',
                            $componentProps: {
                                multiple: false,
                                options: [
                                    {
                                        label: '40m²以下',
                                        value: 'a',
                                        minValue: "",
                                        maxValue: "40",
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '40-60m²',
                                        value: 'b',
                                        minValue: "40",
                                        maxValue: "60",
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '60-80m²',
                                        value: 'c',
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '80-100m²',
                                        value: 'd',
                                        minValue: "80",
                                        maxValue: "100",
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '100-120m²',
                                        value: 'e',
                                        minValue: "100",
                                        maxValue: "120",
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '120-144m²',
                                        value: 'f',
                                        minValue: "120",
                                        maxValue: "144",
                                        key: 'houseFloorageList',
                                    },
                                    {
                                        label: '自定义',
                                        value: '$numberRange',
                                        minValue: "",
                                        maxValue: "",
                                        key: 'houseFloorageList',
                                    }
                                ]
                            },
                            $value: []
                        }
                    ]
                }
            ])
            function confirm(e) {
                // 返回值为一个数组
                console.log('eeee', e);
            }
            return {
                filterData1,
                filterData2,
                confirm
            }
        }
    }
</script>
<style lang="scss">
page {
    background-color: #f0f0f0;
}
</style>

微信小程序在线体验

预览

appDemo安装包下载地址：android安装包;

随意放置，样式布局自适应，使得你的开发效率更加高效。

小程序效果功能预览	app效果功能预览

参数

可选参数属性列表

参数名	说明	类型	是否必填	默认值	可选值
filterData	筛选列表(配置说明见下面)	Array	是	[]	-
childName	子级菜单字段名	String	否	submenu	-
fileds	显示字段	String	否	name	-
isChild	返回结果时是否一并返回子菜单	Boolean	否	false	true
autoStow	菜单类型为 hierarchy 或 hierarchy-column 或 single-hierarchy 时选择完成之后是否自动收起菜单并返回选中值，默认 true，选择所有子菜单后再收起，如果有多级时，希望选择一级或二级菜单时就收起，需要设置为 false，点击确定收起	Boolean	否	true	false
resetStow	重置参数后自动收起菜单	Boolean	否	false	true
overlay	是否显示遮罩	Boolean	否	true	false
closeOnClickOverlay	点击遮罩是否收起菜单	Boolean	否	true	false
shadow	是否显示菜单下阴影	Boolean	否	true	false

filterData参数说明-每种空间类型的效果在上面demo上有体现

{ name, // 显示名字 type, // 控件类型：radio, filter, single-hierarchy, hierarchy, hierarchy-column, hierarchy-column-multiple, composite submenu, // 空间集合 } [] as filterData

Event 事件

事件名	说明	类型	回调参数
confirm	菜单收起时返回的筛选结果	emit	array

Slot 插槽

名称	说明	参数
header	自定义顶部内容，如，在顶部添加搜索栏	无
title	自定义选中显示样式，如，修改显示顺序	title

next-x-drop-down（vue3版本，超强拉筛选菜单，多平台测试通过）下拉菜单 筛选 fliter 多选 单选

更新记录

1.0.4（2024-10-18）

1.0.3（2024-10-18）

1.0.2（2024-09-12）

平台兼容性

next-x-drop-down --超强下拉筛选菜单，多平台测试通过，不支持的平台暂未测试

next-x-drop-down

如何使用

基本用法(vue3+ts demo)

微信小程序在线体验

预览

appDemo安装包下载地址：android安装包;

参数

filterData参数说明-每种空间类型的效果在上面demo上有体现

Event 事件

Slot 插槽

隐私、权限声明

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

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

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

next-tree（超强树选择器，树组件，树插件，无限级联树，单选树，多选树，自定义样式树，树形选择

next-table（多功能表格：多选checkbox、删除，编辑、合计，分页）

next-indexed-xlist(vue2 vue3通用)通讯录、城市、地址列表；支持双向联动

next-bubble-menu（汽泡菜单、气泡框、泡泡框、悬浮框、悬浮菜单）

next-xcascader（vue2、vue3通用，多端适用）自定义多级选择；无限级联

next-x-drop-down（vue3版本，超强拉筛选菜单，多平台测试通过） 下拉菜单 筛选 fliter 多选 单选

更新记录

1.0.4（2024-10-18）

1.0.3（2024-10-18）

1.0.2（2024-09-12）

平台兼容性

next-x-drop-down --超强下拉筛选菜单，多平台测试通过，不支持的平台暂未测试

next-x-drop-down

如何使用

基本用法(vue3+ts demo)

微信小程序在线体验

预览

appDemo安装包下载地址：android安装包;

参数

filterData参数说明-每种空间类型的效果在上面demo上有体现

Event 事件

Slot 插槽

隐私、权限声明

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

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

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

next-tree（超强树选择器，树组件，树插件，无限级联树，单选树，多选树，自定义样式树，树形选择

next-table（多功能表格：多选checkbox、删除，编辑、合计，分页）

next-indexed-xlist(vue2 vue3通用)通讯录、城市、地址列表；支持双向联动

next-bubble-menu（汽泡菜单、气泡框、泡泡框、悬浮框、悬浮菜单）

next-xcascader（vue2、vue3通用，多端适用）自定义多级选择；无限级联

Modal title

next-x-drop-down（vue3版本，超强拉筛选菜单，多平台测试通过）下拉菜单筛选 fliter 多选单选