微信小程序下拉框组件怎么弄？

时间：2023-07-01 14:05 阅读数：7人阅读

　　随着微信越来越多人的使用，微信小程序也越来越普及。对于小程序的便利，没有人会舍得放弃使用它。许多人都知道微信小程序有许多组件，下拉框组件便是其中一种，一些人想要制作一个下拉框程序组件却不知道该怎么弄?接下来小编就辛苦一下，告诉大家。

　　布局方面，整体使用dl来写，二级包在dd中，用ul li来写;交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。

　　1.使用dt做出第一级菜单

　　2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层

　　3.dt绑定点击事件tapMainMenu，flag控制显隐toggle，提供2个class,hidden与show，来控制显隐。注：dt也是可以bindTap的，不单是view。

　　4.关闭所有一级菜单，每个一级菜单都有一个index标识，由tapMainMenu事件传递过去，与数组subMenuDisplay一一对应，当前元素subMenuDisplay[index]视原来状态决定是显示或隐藏。

　　核心代码：

　　5.选中二级菜单当前项，但给个系统icon及改变背景色，文本加粗，同样改变一级菜单标题，demo中给出一个弹窗

　　声明tapSubMenu方法，监听二级点击事件

　　加highlight效果

　　与一级菜单不同，使用二维数组的方式实现点击高亮，这样才能定位到是某一级的某二级菜单，再决定显示隐藏。布局文件改成：

　　点击事件

　　微信小程序下拉框组件怎么弄?对此相信许多人都有这种疑问，以上便是小编给大家提供的内容，大家都学会了吗?微信小程序给我们的生活带来了许多便利，大家还在犹豫什么?赶快尝试一下吧。如果想要了解更多关于微信小程序的内容，请多多关注微微风。