溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何制作微信小程序下拉框組件”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何制作微信小程序下拉框組件”這篇文章吧。
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("") } |
以上是“如何制作微信小程序下拉框組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
