微信小程序下拉筛选菜单WXDropDownMenu组件

发布：2018-01-25 15:02浏览：次来源：网络作者：tianshu

先来看下效果图：

思路与步骤：

布局方面，整体使用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]视原来状态决定是显示或隐藏。

核心代码：

// 使用function初始化array，相比var initSubMenuDisplay = [] 既避免的引用复制的，同时方式更灵活，将来可以是多种方式实现，个数也不定的
function initSubMenuDisplay() {
return ['hidden', 'hidden', 'hidden'];
}
Page({
data:{
subMenuDisplay:initSubMenuDisplay()
},
tapMainMenu: function(e) {
// 获取当前显示的一级菜单标识
var index = parseInt(e.currentTarget.dataset.index);
// 生成数组，全为hidden的，只对当前的进行显示
var newSubMenuDisplay = initSubMenuDisplay();
// 如果目前是显示则隐藏，反之亦反之。同时要隐藏其他的菜单
if(this.data.subMenuDisplay[index] == 'hidden') {
newSubMenuDisplay[index] = 'show';
} else {
newSubMenuDisplay[index] = 'hidden';
}
// 设置为新的数组
this.setData({
subMenuDisplay: newSubMenuDisplay
});
}
});

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。