收藏人数:
购买源码授权版（
试用
赞赏（0）
更新记录
1.0.2（2024-09-12）
app demo安装包地址
1.0.1（2024-08-29）
update
1.0.0（2024-08-19）
初始化控件
查看更多平台兼容性
uni-app
| Vue2 | Vue3 |
|---|---|
| √ | ? |
| app-vue | app-nvue | app-android | app-ios | app-harmony |
|---|---|---|---|---|
| ? | ? | ? | ? | ? |
| H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
|---|---|---|---|---|---|---|---|---|
| ? | ? | ? | ? | ? | ? | ? | ? | ? |
| 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| ? | ? | ? | ? | ? | ? | ? | ? | ? |
| 快应用-华为 | 快应用-联盟 |
|---|---|
| ? | ? |
uni-app x
| app-android | app-ios |
|---|---|
| ? | ? |
| 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 |
下载 4971
赞赏 47
下载 8586643
赞赏 1197
赞赏
京公网安备：11010802035340号