看，别人家的下拉菜单写得多好

站在前人的肩膀上，做了删改，原文出处http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1378

droplist.gif

feature:

1、支持下拉动画
2、当前选中项高亮
3、子菜单由二维数组构建
4、带背景遮罩

其中1、4两点，前人就已经写好了的。

说明

1、open一维数组保存着子菜单开合状态
2、show一维数组保存着子菜单激活状态
3、highlight二维数组保存着子菜单的点选index值

核心代码

下拉动画核心代码

@keyframes slidown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}

.slidown {
  display: block;
  animation: slidown .3s ease-in both;
}

高亮状态核心代码

    // 获取原高亮状态
    var highlight = this.data.highlight;
    // 消除兄弟亮亮
    highlight[naviIndex] = highlight[naviIndex].map(item => {
      return '';
    });
    // 设定当前高亮状态
    highlight[naviIndex][rowIndex] = 'highlight';
    // 存回高亮数组
    this.setData({
      highlight: highlight
    });

下拉抽屉核心代码

list: function(e) {
    var index = e.currentTarget.dataset.nav;
    var open = this.data.open;
    var isMasked = this.data.isMasked;
    var show = this.data.show;
    var naviIndex = this.data.naviIndex;
    for (var i = 0; i < this.data.menu.length; i++) {
      // 除当前元素外，其他元素一律取false
      if (i != index) {
        open[i] = false;
      }
      show[i] = false;
    }
    if (open[index] == true) {
      // 当前元素取反
      open[index] = false;
      isMasked = false;
      naviIndex = -1;
    } else {
      open[index] = true;
      isMasked = true;
      naviIndex = index
    }
    show[index] = true;
    this.setData({
      open: open,
      isMasked: isMasked,
      show: show,
      naviIndex: naviIndex
    });
  },

git地址

http://git.oschina.net/dotton/demo-wx中的子文件夹——下拉菜单

pay mp