微信小程序下拉菜单效果的实例代码

//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("")
  }
}

总结

以上所述是小编给大家介绍的微信小程序下拉菜单效果的实例代码，希望对大家有所帮助