溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何制作微信小程序下拉框組件

發(fā)布時間：2022-03-15 10:46:05 來源：億速云 閱讀：309 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“如何制作微信小程序下拉框組件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何制作微信小程序下拉框組件”這篇文章吧。

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
//數(shù)據(jù)源 
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,//菜單數(shù)據(jù) 
  subMenuDisplay: initSubMenuDisplay, //一級 
  subMenuHighLight: initSubMenuHighLight, //二級 
   animationData: initAnimationData //動畫 
}) 
  
  
  
//一級菜單點擊 
tapMainMenu: function (e) { 
  //獲取當(dāng)前一級菜單標(biāo)識 
  var index = parseInt(e.currentTarget.dataset.index); 
  //改變顯示狀態(tài) 
  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() 
  //}); 
  // 當(dāng)前二級菜單的標(biāo)識 
  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] = ''; 
      } 
    } 
  } 
  //給當(dāng)前二級菜單添加樣式 
  initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; 
  //刷新樣式 
  this.setData({ 
    subMenuHighLight: initSubMenuHighLight 
  }); 
   // 設(shè)置動畫 
   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(); 
  // 導(dǎo)出到數(shù)據(jù)，綁定給view屬性 
   var animationStr = animation.export(); 
  // 原來的數(shù)據(jù) 
   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("") 
  }   

以上是“如何制作微信小程序下拉框組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手