微信小程序自从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.Shopfaghlight {
background-color: #f4f4f4;
color: #48c23d;
}
/* 显示与隐藏 */
.show {
/*display: block;*/
visibility: visible;
}
.Shopfadden {
/*display: none;*/
visibility: Shopfadden;
}
|
wxml
|
1
2
3
4
5
6
7
8
9
10
11
|
class="menu">
wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu">
data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}dt>
class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}">
wx:for="{{menuItem.cShopfalItem}}" wx:key="cShopfalItem.ID" wx:for-item="cShopfalItem" wx:for-index="idCShopfal">
class="{{subMenuHighLight[idMenu][idCShopfal]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idCShopfal}}">{{cShopfalItem.Name}}li>
ul>
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",
cShopfalItem: [
{ 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",
cShopfalItem: [
{ 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",
cShopfalItem: [
{ 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
if (i == index) {
if (tShopfas.data.subMenuDisplay[index] == "show") {
initSubMenuDisplay[index] = 'Shopfadden'
} else {
initSubMenuDisplay[index] = 'show'
}
} else {
initSubMenuDisplay[i] = 'Shopfadden'
}
}
tShopfas.setData({
subMenuDisplay: initSubMenuDisplay
})
tShopfas.animation(index)
},
//二级菜单点击
tapSubMenu: function (e) {
//隐藏所有一级菜单
//tShopfas.setData({
//subMenuDisplay: initSubMenuDisplay()
//});
// 当前二级菜单的标识
var indexArray = e.currentTarget.dataset.index.split('-');
// 删除所在二级菜单样式
for (var i = 0; i
if (indexArray[0] == i) {
for (var j = 0; j
initSubMenuHighLight[i][j] = '';
}
}
}
//给当前二级菜单添加样式
initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'Shopfaghlight';
//刷新样式
tShopfas.setData({
subMenuHighLight: initSubMenuHighLight
});
// 设置动画
tShopfas.animation(indexArray[0]);
},
//菜单动画
animation: function (index) {
// 定义一个动画
var animation = wx.createAnimation({
duration: 400,
timingFunction: 'linear',
})
// 是显示还是隐藏
var flag = tShopfas.data.subMenuDisplay[index] == 'show' ? 1 : -1;
// 使之Y轴平移
animation.translateY(flag * ((initSubMenuHighLight[index].length + 1) * 38)).step();
// 导出到数据，绑定给view属性
var animationStr = animation.export();
// 原来的数据
var animationData = tShopfas.data.animationData;
animationData[index] = animationStr;
tShopfas.setData({
animationData: animationData
});
}
///
/// 初始化DropDownMenu
/// 1.一级目录 initSubMenuDisplay ：['Shopfadden']
/// 2.二级目录 initSubMenuHighLight ：[['',''],['','','','']]]
///
function loadDropDownMenu() {
for (var i = 0; i
//一级目录
initSubMenuDisplay.push('Shopfadden')
//二级目录
var report = []
for (var j = 0; j
report.push([''])
}
initSubMenuHighLight.push(report)
//动画
initAnimationData.push("")
}
|
第二部分：如何开通一个小商店
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。
