用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

15

主题

35

帖子

704

积分

特邀嘉宾

积分
704
2017-9-10 10:14:49 黄秀杰 特邀嘉宾 楼主 12728
站在前人的肩膀上,做了删改,原文出处http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1378
feature:
1、支持下拉动画
2、当前选中项高亮
3、子菜单由二维数组构建
4、带背景遮罩
其中1、4两点,前人就已经写好了的。
说明
1、open一维数组保存着子菜单开合状态
2、show一维数组保存着子菜单激活状态
3、highlight二维数组保存着子菜单的点选index值

核心代码
下拉动画核心代码

[JavaScript] 纯文本查看 复制代码
@keyframes slidown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}

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


高亮状态核心代码
[JavaScript] 纯文本查看 复制代码
    // 获取原高亮状态
    var highlight = this.data.highlight;
    // 消除兄弟亮亮
    highlight[naviIndex] = highlight[naviIndex].map(item => {
      return '';
    });
    // 设定当前高亮状态
    highlight[naviIndex][rowIndex] = 'highlight';
    // 存回高亮数组
    this.setData({
      highlight: highlight
    });

下拉抽屉核心代码
[JavaScript] 纯文本查看 复制代码
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中的子文件夹——下拉菜单

评分

参与人数 1原创 +1 浮云 +10 收起 理由
Rolan + 1 + 10

查看全部评分

很厉害
发新帖
    您需要登录后才可以回帖 登录 | 立即注册