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

微信小程序下拉菜单简单实例wcss /**DropDownMenu**//*总菜单容器*/.menu{display:block;height:28px;po

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

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

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

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