微信小程序 下拉菜单

//wcss
/**DropDownMenu**/

/*总菜单容器*/

.menu {
  display: block;
  height: 28px;
  position: relative;
}

/*一级菜单*/

.menu dt {
  font-size: 15px;
  float: left;
  /*hack*/
  width: 33%;
  height: 38px;
  border-right: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  text-align: center;
  background-color: #f4f4f4;
  color: #5a5a5a;
  line-height: 38px;
  z-index: 2;
}

/*二级菜单外部容器样式*/

.menu dd {
  position: absolute;
  width: 100%;
  margin-top: 40px;
  left: 0;
  z-index: -99;
}

/*二级菜单普通样式*/

.menu li {
  font-size: 14px;
  line-height: 34px;
  color: #575757;
  height: 34px;
  display: block;
  padding-left: 8px;
  background-color: #fff;
  border-bottom: 1px solid #dbdbdb;
}

/*二级菜单高亮样式*/

.menu li.highlight {
  background-color: #f4f4f4;
  color: #48c23d;
}

/* 显示与隐藏 */

.show {
  /*display: block;*/
  visibility: visible;
}

.hidden {
  /*display: none;*/
  visibility: hidden;
}

//wxml 
<dl class="menu">
    <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu">
      <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt>
      <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}">
        <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil">
          <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li>
        </ul>
        <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 时间：{{dateValue}}</picker>
      </dd>
    </block>
</dl>

//js
//数据源
var ReportDataSync = [
    {
        reportType: "日报1",
        chilItem: [
            { ID: 1, Name: "日报1", ReportUrl: "DailyReport.aspx", Type: 1 },
            { ID: 2, Name: "日报2", ReportUrl: "DailyReport.aspx", Type: 1 },
            { ID: 3, Name: "日报3", ReportUrl: "DailyReport.aspx", Type: 1 }]
    },
    {
        reportType: "目录2",
        chilItem: [
            { ID: 1, Name: "目录1", ReportUrl: "DailyReport.aspx", Type: 2 },
            { ID: 2, Name: "目录2", ReportUrl: "DailyReport.aspx", Type: 2 },
            { ID: 3, Name: "目录3", ReportUrl: "DailyReport.aspx", Type: 2 },
            { ID: 4, Name: "目录4", ReportUrl: "DailyReport.aspx", Type: 2 }]
    },
    {
        reportType: "月报3",
        chilItem: [
            { ID: 1, Name: "月报1", ReportUrl: "DailyReport.aspx", Type: 1 },
            { ID: 2, Name: "月报2", ReportUrl: "DailyReport.aspx", Type: 2 }]
    }
]

//定义字段
var initSubMenuDisplay = [] 
var initSubMenuHighLight = []
var initAnimationData = []

/// 初始化DropDownMenu
loadDropDownMenu()

that.setData({
    reportData: ReportDataSync,//菜单数据
    subMenuDisplay: initSubMenuDisplay, //一级
    subMenuHighLight: initSubMenuHighLight, //二级
      animationData: initAnimationData //动画
})



//一级菜单点击
tapMainMenu: function (e) {
    //获取当前一级菜单标识
    var index = parseInt(e.currentTarget.dataset.index);
    //改变显示状态
    for (var i = 0; i < initSubMenuDisplay.length; i++) {
        if (i == index) {
            if (this.data.subMenuDisplay[index] == "show") {
                initSubMenuDisplay[index] = 'hidden'
            } else {
                initSubMenuDisplay[index] = 'show'
            }
        } else {
            initSubMenuDisplay[i] = 'hidden'
        }
    }
    this.setData({
        subMenuDisplay: initSubMenuDisplay
    })
       this.animation(index)
},

//二级菜单点击
tapSubMenu: function (e) {
    //隐藏所有一级菜单
    //this.setData({
    //subMenuDisplay: initSubMenuDisplay()
    //});
    // 当前二级菜单的标识
    var indexArray = e.currentTarget.dataset.index.split('-');
     // 删除所在二级菜单样式
    for (var i = 0; i < initSubMenuHighLight.length; i++) {
        if (indexArray[0] == i) {
            for (var j = 0; j < initSubMenuHighLight[i].length; j++) {
                initSubMenuHighLight[i][j] = '';
            }
        }
    }
    //给当前二级菜单添加样式
    initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
    //刷新样式
    this.setData({
        subMenuHighLight: initSubMenuHighLight
    });
      // 设置动画
     this.animation(indexArray[0]);
},

//菜单动画
animation: function (index) {
       // 定义一个动画
      var animation = wx.createAnimation({
         duration: 400,
       timingFunction: 'linear',
    })
    // 是显示还是隐藏
    var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1;
    // 使之Y轴平移
    animation.translateY(flag * ((initSubMenuHighLight[index].length + 1) * 38)).step();
    // 导出到数据，绑定给view属性
     var animationStr = animation.export();
    // 原来的数据
     var animationData = this.data.animationData;
    animationData[index] = animationStr;
    this.setData({
        animationData: animationData
    });
}


/// <summary>
/// 初始化DropDownMenu
/// 1.一级目录 initSubMenuDisplay ：['hidden']
/// 2.二级目录 initSubMenuHighLight ：[['',''],['','','','']]]
/// </summary>
function loadDropDownMenu() {
    for (var i = 0; i < ReportDataSync.length; i++) {
        //一级目录
        initSubMenuDisplay.push('hidden')
        //二级目录
        var report = []
        for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) {
            report.push([''])
        }
        initSubMenuHighLight.push(report)
              //动画
        initAnimationData.push("")
    }
}