微信小程序 下拉菜单简单实例

微信小程序 下拉菜单简单实例

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！