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

//wcss/**DropDownMenu**//*总菜单容器*/.menu{display:block;height:28px;position:relative;}/*一级菜单*/.menudt{fo

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

总结

以上所述是小编给大家介绍的微信小程序下拉菜单效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！