微信小程序编辑器_微信小程序 下拉菜单简略实例

微信小程序 下拉菜单简单实例     投稿:lqh   这篇文章主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
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 animation="{{animationData[idMenu]}}" ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil" li bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}" {{chilItem.Name}} /li /ul picker mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="" end="" 时间:{{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 //动画 

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

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


相关阅读