更新记录

1.0.1(2023-10-14) 下载此版本

2023.10.1 1.新增点击置顶菜单功能,与美团,饿了么功能一致 2.发布uni_modules版本,请下载uni_modules版本,非uni_modules版本停止更新 3.新增 三列形式的菜单 详细请下载示例查看data2.js 4.优化 点击遮罩层等未选择菜单关闭菜单情况不触发confirm回调


平台兼容性

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

组件兼容APP-VUE、H5、MP-WEIXIN,其他端未做兼容测试,不支持。
遇到问题或有建议可以添加qq:173253786
如果觉得组件不错,给五星鼓励鼓励咯!

使用说明

在页面中使用组件

<template>
    <L-Dropdown menuTop="200rpx;" :filterData="menuItems2" :defaultSelected="filterDropdownValue"></L-Dropdown>
</template>
<script>
    import menuData from '@/common/data2.js';
    export default {
        data() {
            return {
                menuItems2: [],
            }
        },
        created() {
            this.menuItems2 = menuData;
        }
    }
</script>

说明一下,如果菜单列表使用的数据过多,建议放在js文件里面,像我这样

data2.js里面存放的是菜单数据,如要修改数据,请模仿格式自行更改

属性说明

属性名 类型 说明
filterData Object 必选,菜单数据,数据格式请下载示例查看
defaultSelected Array 可选,默认选中子菜单数据,需要传入跟@confirm输出的index相同的结构数据,如不确定可以先传入数据看下输出的结果
updateMenuName Boolean 可选,选择子菜单是否自动修改对应的顶部菜单文字,可取值:true/false,默认值:true
menuTop Number 可选,菜单到顶部距离,单位rpx,一般用于页面有自己写的标题栏或搜索栏时,默认值:0
@confirm EventHandle 用户选择完毕/收起菜单,触发confirm事件,event= {value,index}

传入数据格式等更多的说明请下载示例查看,有数据对照注释更容易明白。

偷偷的打广告

定制模板,开发uniapp、H5+APP、vue2,vue3、微信小程序,付费咨询指导,有需要加QQ。

v:19120597808 (刮刮卡)

隐私、权限声明

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

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

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

许可协议

MIT协议

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