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

2024-02-25 17:37:04 61

/**DropDownMenu**/ /*总菜单容器*/ .menu{ display:block; height:28px; position:relative; } /*一级菜单*/ .menudt{ font-size:15px; float:left; /*hack*/ width:33%; height:38px; border-right:1pxsolid#d2d2d2; border-bottom:1pxsolid#d2d2d2; text-align:center; background-color:#f4f4f4; color:#5a5a5a; line-height:38px; z-index:2; } /*二级菜单外部容器样式*/ .menudd{ position:absolute; width:100%; margin-top:40px; left:0; z-index:-99; } /*二级菜单普通样式*/ .menuli{ font-size:14px; line-height:34px; color:#575757; height:34px; display:block; padding-left:8px; background-color:#fff; border-bottom:1pxsolid#dbdbdb; } /*二级菜单高亮样式*/ .menuli.highlight{ background-color:#f4f4f4; color:#48c23d; } /*显示与隐藏*/ .show{ /*display:block;*/ visibility:visible; } .hidden{ /*display:none;*/ visibility:hidden; }

//数据源 varReportDataSync=[ { 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}] } ] //定义字段 varinitSubMenuDisplay=[] varinitSubMenuHighLight=[] varinitAnimationData=[] ///初始化DropDownMenu loadDropDownMenu() that.setData({ reportData:ReportDataSync,//菜单数据 subMenuDisplay:initSubMenuDisplay,//一级 subMenuHighLight:initSubMenuHighLight,//二级 animationData:initAnimationData//动画 }) //一级菜单点击 tapMainMenu:function(e){ //获取当前一级菜单标识 varindex=parseInt(e.currentTarget.dataset.index); //改变显示状态 for(vari=0;i ///初始化DropDownMenu ///1.一级目录initSubMenuDisplay：['hidden'] ///2.二级目录initSubMenuHighLight：[['',''],['','','','']]] /// functionloadDropDownMenu(){ for(vari=0;i

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

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

热门推荐

随机推荐

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