注冊

制作微信小程序下拉框組件實例，微信小程序下拉框開發(fā)文檔

2020-09-27
導(dǎo)讀：微信小程序自從2018年元旦微信的第一次改版，已經(jīng)可以直接可以從微信主頁下拉框進(jìn)入列表，進(jìn)入使用過的小程序了，那么實現(xiàn)這種微信小程序下拉框的組件如何。...

　　微信小程序自從2018年元旦微信的第一次改版，已經(jīng)可以直接可以從微信主頁下拉框進(jìn)入列表，進(jìn)入使用過的小程序了，那么實現(xiàn)這種微信小程序下拉框的組件如何。

　

制作微信小程序下拉框組件實例，微信小程序下拉框開發(fā)文檔

 
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("") 
  }   

 

 

 

 

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)