|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
/**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
|
1
2
3
4
5
6
7
8
9
10
11
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
//數據源 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 //動畫 }) //一級菜單點擊 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 }) 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 }); } /// <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) //動畫 initAnimationData.push("") } |
掃碼免費領取運營資料包
