导航：首页 > 开发技术 >

如何制作微信小程序下拉框组件

发表于：2026-11-01 作者：千家信息网编辑

千家信息网最后更新 2026年11月01日，这篇文章主要为大家展示了"如何制作微信小程序下拉框组件"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"如何制作微信小程序下拉框组件"这篇文章吧。1 2 3

千家信息网最后更新 2026年11月01日如何制作微信小程序下拉框组件

这篇文章主要为大家展示了"如何制作微信小程序下拉框组件"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"如何制作微信小程序下拉框组件"这篇文章吧。

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>

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 }); } ///
/// 初始化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("") }