위 챗 애플 릿 드 롭 다운 메뉴 간단 한 인 스 턴 스
wcss
/**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
<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
//
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("")
}
}
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.