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

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

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

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

时间：{{dateValue}}

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: AnvbQ2, 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({

//subMenuDiAnvbQsplay: 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("")

}

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。