微信小程序下拉菜单的实现
微信小程序 下拉菜单
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、大邑县网络推广、微信小程序、大邑县网络营销、大邑县企业策划、大邑县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供大邑县建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
看下实现效果图:
实例:
//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
JS 代码:
//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 = [] /// 初始化DropDownMenu loadDropDownMenu() that.setData({ reportData: ReportDataSync,//菜单数据 subMenuDisplay: initSubMenuDisplay, //一级 subMenuHighLight: initSubMenuHighLight //二级 }) //一级菜单点击 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 }) }, //二级菜单点击 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 }); } ////// 初始化DropDownMenu /// 1.一级目录 initSubMenuDisplay :['hidden'] /// 2.二级目录 initSubMenuHighLight :[['',''],['','','','']]] /// 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) } }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
网站名称:微信小程序下拉菜单的实现
分享路径:http://pwwzsj.com/article/pcgegc.html