注冊

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

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

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

　

制作微信小程序下拉框組件實(shí)例，微信小程序下拉框開發(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; 
} 
  
/*一級(jí)菜單*/
  
.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; 
} 
  
/*二級(jí)菜單外部容器樣式*/
  
.menu dd { 
 position: absolute; 
 width: 100%; 
 margin-top: 40px; 
 left: 0; 
 z-index: -99; 
} 
  
/*二級(jí)菜單普通樣式*/
  
.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; 
} 
  
/*二級(jí)菜單高亮樣式*/
  
.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"> 時(shí)間：{{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: "日報(bào)1", 
    chilItem: [ 
      { ID: 1, Name: "日報(bào)1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "日報(bào)2", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 3, Name: "日報(bào)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: "月報(bào)3", 
    chilItem: [ 
      { ID: 1, Name: "月報(bào)1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "月報(bào)2", ReportUrl: "DailyReport.aspx", Type: 2 }] 
  } 
] 
  
//定義字段 
var initSubMenuDisplay = []  
var initSubMenuHighLight = [] 
var initAnimationData = [] 
  
/// 初始化DropDownMenu 
loadDropDownMenu() 
  
that.setData({ 
  reportData: ReportDataSync,//菜單數(shù)據(jù) 
  subMenuDisplay: initSubMenuDisplay, //一級(jí) 
  subMenuHighLight: initSubMenuHighLight, //二級(jí) 
   animationData: initAnimationData //動(dòng)畫 
}) 
  
  
  
//一級(jí)菜單點(diǎn)擊 
tapMainMenu: function (e) { 
  //獲取當(dāng)前一級(jí)菜單標(biāo)識(shí) 
  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) 
}, 
  
//二級(jí)菜單點(diǎn)擊 
tapSubMenu: function (e) { 
  //隱藏所有一級(jí)菜單 
  //this.setData({ 
  //subMenuDisplay: initSubMenuDisplay() 
  //}); 
  // 當(dāng)前二級(jí)菜單的標(biāo)識(shí) 
  var indexArray = e.currentTarget.dataset.index.split('-'); 
   // 刪除所在二級(jí)菜單樣式 
  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)前二級(jí)菜單添加樣式 
  initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; 
  //刷新樣式 
  this.setData({ 
    subMenuHighLight: initSubMenuHighLight 
  }); 
   // 設(shè)置動(dòng)畫 
   this.animation(indexArray[0]); 
}, 
  
//菜單動(dòng)畫 
animation: function (index) { 
    // 定義一個(gè)動(dòng)畫 
   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.一級(jí)目錄 initSubMenuDisplay ：['hidden'] 
/// 2.二級(jí)目錄 initSubMenuHighLight ：[['',''],['','','','']]] 
/// </summary> 
function loadDropDownMenu() { 
  for (var i = 0; i < ReportDataSync.length; i++) { 
    //一級(jí)目錄 
    initSubMenuDisplay.push('hidden') 
    //二級(jí)目錄 
    var report = [] 
    for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) { 
      report.push(['']) 
    } 
    initSubMenuHighLight.push(report) 
       //動(dòng)畫 
    initAnimationData.push("") 
  }   

 

 

 

 

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

第一部分：小商店是什么

第二部分：如何開通一個(gè)小商店

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

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

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

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

第七部分：小程序直播

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

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

第十部分：小程序客服

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

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