微信小程序下拉框程序组件怎么弄?
随着越来越多的人使用微信,微信小程序也越来越受欢迎。为了小程序的便利性,没有人愿意放弃使用它。很多人都知道微信小程序有很多组件,下拉框组件就是其中之一。有人想做一个下拉框程序组件但不知道怎么做?接下来我就努力的告诉大家。
布局方面,整体布局用dl写,二级封装用dd写,ul li写;交互方面,点击某级菜单关闭同级子菜单,点击某一个子菜单关闭所有菜单。
1.使用dt制作一级菜单
2、使用dd嵌套二级菜单,初始隐藏,定位为绝对,使用z-index弹出页面层。
3、dt绑定点击事件tapMainMenu,flag控制显示和隐藏切换,提供了hidden和show 2个类来控制显示和隐藏。注意:dt还可以bindTap,而不仅仅是view。
4. 关闭所有一级菜单。每个一级菜单都有一个索引标识符,由tapMainMenu事件传递,对应数组subMenuDisplay。当前元素subMenuDisplay[index]根据原始状态来决定是显示还是隐藏。
核心代码:
5.选择二级菜单的当前项,但给出一个系统图标并更改背景颜色,将文本加粗,同时更改一级菜单标题,并在demo中给出一个弹出窗口
声明tapSubMenu方法来监听二级点击事件
添加高光效果
与一级菜单不同的是,点击高亮是利用二维数组来实现的,这样可以定位到某级的某个二级菜单,然后决定显示或隐藏。将布局文件更改为:
点击事件
如何制作微信小程序的下拉框组件?相信很多人都有这样的疑问。以上是小编提供的内容。大家都学会了吗?微信小程序给我们的生活带来了很多便利。你还在犹豫什么?现在就试试。