注册

制作微信小程序下拉框组件实例,微信小程序下拉框开发文档

2020-09-27
导读:微信小程序自从2018年元旦微信的第一次改版,已经可以直接可以从微信主页下拉框进入列表,进入使用过的小程序了,那么实现这种微信小程序下拉框的组件如何。...

  微信小程序自从2018年元旦微信的第一次改版,已经可以直接可以从微信主页下拉框进入列表,进入使用过的小程序了,那么实现这种微信小程序下拉框的组件如何。

 

制作微信小程序下拉框组件实例,微信小程序下拉框开发文档

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

 

 

 

 

【本站声明】

1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。

重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

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

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发