微信小程序下拉菜单效果

作者：xiaochun365，来自原文地址 

6270036ab4b63cabb300b65fc6e7c147.gif (27.47 KB, 下载次数: 33)

下载附件

2018-5-18 03:30 上传

//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 = []  
/// 初始化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  
    });  
}  
/// <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)  
    }  
}