微信小程序下拉菜单组件实现

先看需求和效果，移动端设计比较常用的下拉菜单，主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型：

效果展示

第一个是单选下拉菜单，单选之后立即收起。

第二个是复选下拉菜单，主要提供了多选的功能，显示确定和重置按钮用于修改复选结果。

第三种是自定义内容，提供给用户自己写组件内容的插槽。

要点

1. 组件间的关系

父组件WXML

<view class="mt_dropdown" id="mt_dropdown">
  <slot></slot>
</view>

DEMO运用组件

<mt-dropdown>
	<mt-dropdown-item></mt-dropdown-item>
	<mt-dropdown-item></mt-dropdown-item>
</mt-dropdown>

主要问题：子组件是放在slot插槽里面，如何和父组件进行沟通。因为遮罩层是嵌在子组件里的，所以需要点击打开一个下拉菜单子项的时候，去关闭其余下拉菜单子项。大家有空可以去看下vant-weapp的源码，这里处理的较为简单。最主要的问题就是<mt-dropdown-item>和<mt-dropdown>之间如何沟通。

遇事不决先看文档微信小程序-组件间关系，主要是relations定义段

---

微信小程序代码片段，可以在微信开发者工具中查看效果和代码。

我在小程序开发的过程中也开发了许多组件，可以在我的gitee地址中去查看，所有组件的API都可以在Wiki中查看（有的太懒就没写了），如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。