微信小程序下拉菜单效果

发布：2018-01-24 16:27浏览：次来源：网络作者：tianshu

//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;
}

1. //wxml
2. <dl class="menu">
3. <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu">
4. <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt>
5. <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}">
6. <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil">
7. <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li>
8. </ul>
9. <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 时间：{{dateValue}}</picker>
10. </dd>
11. </block>
12. </dl>

1. //js
2. //数据源
3. var ReportDataSync = [
4. {
5. reportType: "日报1",
6. chilItem: [
7. { ID: 1, Name: "日报1", ReportUrl: "DailyReport.aspx", Type: 1 },
8. { ID: 2, Name: "日报2", ReportUrl: "DailyReport.aspx", Type: 1 },
9. { ID: 3, Name: "日报3", ReportUrl: "DailyReport.aspx", Type: 1
10. },
11. {
12. reportType: "目录2",
13. chilItem: [
14. { ID: 1, Name: "目录1", ReportUrl: "DailyReport.aspx", Type: 2 },
15. { ID: 2, Name: "目录2", ReportUrl: "DailyReport.aspx", Type: 2 },
16. { ID: 3, Name: "目录3", ReportUrl: "DailyReport.aspx", Type: 2 },
17. { ID: 4, Name: "目录4", ReportUrl: "DailyReport.aspx", Type: 2
18. },
19. {
20. reportType: "月报3",
21. chilItem: [
22. { ID: 1, Name: "月报1", ReportUrl: "DailyReport.aspx", Type: 1 },
23. { ID: 2, Name: "月报2", ReportUrl: "DailyReport.aspx", Type: 2
24. }
26. //定义字段
27. var initSubMenuDisplay = []
28. var initSubMenuHighLight = []
29. /// 初始化DropDownMenu
30. loadDropDownMenu()
31. that.setData({
32. reportData: ReportDataSync,//菜单数据
33. subMenuDisplay: initSubMenuDisplay, //一级
34. subMenuHighLight: initSubMenuHighLight //二级
35. })
36. //一级菜单点击
37. tapMainMenu: function (e) {
38. //获取当前一级菜单标识
39. var index = parseInt(e.currentTarget.dataset.index);
40. //改变显示状态
41. for (var i = 0; i < initSubMenuDisplay.length; i++) {
42. if (i == index) {
43. if (this.data.subMenuDisplay[index == "show") {
44. initSubMenuDisplay[index = 'hidden'
45. } else {
46. initSubMenuDisplay[index = 'show'
47. }
48. } else {
49. initSubMenuDisplay[i = 'hidden'
50. }
51. }
52. this.setData({
53. subMenuDisplay: initSubMenuDisplay
54. })
55. },
56. //二级菜单点击
57. tapSubMenu: function (e) {
58. //隐藏所有一级菜单
59. //this.setData({
60. //subMenuDisplay: initSubMenuDisplay()
61. //});
62. // 当前二级菜单的标识
63. var indexArray = e.currentTarget.dataset.index.split('-');
64. // 删除所在二级菜单样式
65. for (var i = 0; i < initSubMenuHighLight.length; i++) {
66. if (indexArray[0 == i) {
67. for (var j = 0; j < initSubMenuHighLight[i].length; j++) {
68. initSubMenuHighLight[i][j = '';
69. }
70. }
71. }
72. //给当前二级菜单添加样式
73. initSubMenuHighLight[indexArray[0]][indexArray[1 = 'highlight';
74. //刷新样式
75. this.setData({
76. subMenuHighLight: initSubMenuHighLight
77. });
78. }
79. /// <summary>
80. /// 初始化DropDownMenu
81. /// 1.一级目录 initSubMenuDisplay ：['hidden']
82. /// 2.二级目录 initSubMenuHighLight ：[['',''],['','','','']]]
83. /// </summary>
84. function loadDropDownMenu() {
85. for (var i = 0; i < ReportDataSync.length; i++) {
86. //一级目录
87. initSubMenuDisplay.push('hidden')
88. //二级目录
89. var report = []
90. for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) {
91. report.push([''])
92. }
93. initSubMenuHighLight.push(report)
94. }
95. }

上一篇：微信小程序倒计时组件更新，加入时间校准功能

下一篇：微信小程序处理用户拒绝授权情况及微信登录，登录保存等系列解决

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07