微信小程序 下拉菜单简单实例

前端之家收集整理的这篇文章主要介绍了微信小程序 下拉菜单简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 下拉菜单简单实例

wcss

/菜单容器/

.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

@H_301_16@

js

//定义字段
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
});
}

///


/// 初始化DropDownMenu
/// 1.一级目录 initSubMenuDisplay :['hidden']
/// 2.二级目录 initSubMenuHighLight :[['',''],['','','']]]
///

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/39970.html

猜你在找的微信小程序相关文章