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

9158APP 0

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

随着越来越多的人使用微信,微信小程序也越来越受欢迎。为了小程序的便利性,没有人愿意放弃使用它。很多人都知道微信小程序有很多组件,下拉框组件就是其中之一。有人想做一个下拉框程序组件但不知道怎么做?接下来我就努力的告诉大家。

布局方面,整体布局用dl写,二级封装用dd写,ul li写;交互方面,点击某级菜单关闭同级子菜单,点击某一个子菜单关闭所有菜单。

1.使用dt制作一级菜单

2、使用dd嵌套二级菜单,初始隐藏,定位为绝对,使用z-index弹出页面层。

第二步使用dd嵌套第二级菜单

3、dt绑定点击事件tapMainMenu,flag控制显示和隐藏切换,提供了hidden和show 2个类来控制显示和隐藏。注意:dt还可以bindTap,而不仅仅是view。

第三步dt绑定点击事件

4. 关闭所有一级菜单。每个一级菜单都有一个索引标识符,由tapMainMenu事件传递,对应数组subMenuDisplay。当前元素subMenuDisplay[index]根据原始状态来决定是显示还是隐藏。

核心代码:

第四步关闭所有一级菜单

5.选择二级菜单的当前项,但给出一个系统图标并更改背景颜色,将文本加粗,同时更改一级菜单标题,并在demo中给出一个弹出窗口

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

监听二级点击事件

添加高光效果

加highlight效果

与一级菜单不同的是,点击高亮是利用二维数组来实现的,这样可以定位到某级的某个二级菜单,然后决定显示或隐藏。将布局文件更改为:

布局文件改成这样

点击事件

最后一步点击事件

如何制作微信小程序的下拉框组件?相信很多人都有这样的疑问。以上是小编提供的内容。大家都学会了吗?微信小程序给我们的生活带来了很多便利。你还在犹豫什么?现在就试试。