更新记录

1.0.2(2023-09-19) 下载此版本

改为uni_modules规范

1.0.1(2023-06-20) 下载此版本

修改图片引入方法,兼容小程序

1.0.0(2023-04-04) 下载此版本

初始版本

查看更多

平台兼容性

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

dropdownMenu 下拉菜单

使用方法:

<dropdownMenu :modelList.sync="modelList" :disList="disList" :cityList="cityList" :searchList="searchList" :labelList.sync="labelList" @searchFinish="searchFinish"/>
import dropdownMenu from '@/uni_modules/piaoyi-dropdownMenu/components/piaoyi-dropdownMenu/piaoyi-dropdownMenu.vue'
export default {
    components: {
        dropdownMenu
    },
    data() {
        return {
            modelList: [{
                title: '类型1',
                children: [{
                    name: '类型1-1',
                    value: '类型1-1'
                }, {
                    name: '类型1-2',
                    value: '类型1-2'
                }, {
                    name: '类型1-3',
                    value: '类型1-3'
                }, {
                    name: '类型1-4',
                    value: '类型1-4'
                }]
            }, {
                title: '类型2',
                children: [{
                    name: '类型2-1',
                    value: '类型2-1'
                }, {
                    name: '类型2-2',
                    value: '类型2-2'
                }, {
                    name: '类型2-3',
                    value: '类型2-3'
                }, {
                    name: '类型2-4',
                    value: '类型2-4'
                }]
            }],
            disList: [{
                name: '附近',
                id: 1
            }, {
                name: '3公里',
                id: 3
            }, {
                name: '5公里',
                id: 5
            }, {
                name: '10公里',
                id: 10
            }, {
                name: '15公里',
                id: 15
            }, {
                name: '20公里',
                id: 20
            }],
            cityList: [{
                    id: "420102",
                    name: "江岸区"
                },
                {
                    id: "420103",
                    name: "江汉区"
                }
            ],
            searchList: [{
                name: '智能排序',
                value: 0
            }, {
                name: '距离优先',
                value: 1
            }],
            labelList: [{
                id: '标签1',
                name: '标签1'
            }, {
                id: '标签2',
                name: '标签2'
            }, {
                id: '标签3',
                name: '标签3'
            }, {
                id: '标签3',
                name: '标签3'
            }, {
                id: '标签4',
                name: '标签4'
            }],
        }
    },
    methods: {
        <!-- 筛选结果回调 -->
        searchFinish(result) {
            console.log(result)
        }
    }
}

事件说明

事件名 返回值 描述
@searchFinish 例:{models: "类型1-1,类型1-4,类型2-1", distince: 3, searchIndex: 1, labels: "标签3,标签2,标签1,标签4"} 筛选结果回调函数

Prop

参数名称 描述
modelList 标签选项数组,注意prop处加上 .sync,具体格式请看上面的示例
disList 距离选项数组,具体格式请看上面的示例
cityList 地区选项数组,具体格式请看上面的示例
searchList 排序规则数组,具体格式请看上面的示例
labelList 标签选项数组,注意prop处加上 .sync,具体格式请看上面的示例
duration 滑动动画时长

可接定制化组件开发

右侧有本人代表作小程序二维码,可以扫码体验

如使用过程中有问题或有一些好的建议,欢迎加QQ群互相学习交流:120594820

隐私、权限声明

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

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

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

许可协议

MIT协议

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