Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to make WeChat Mini Programs drop-down box components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to make WeChat Mini Programs drop-down box components" this article.

12 34 56 7 8 9 10 11 12 13 14 15 16 17 18 18 19 20 21 23 24 25 27 28 30 31 33 34 36 37 38 39 40 41 43 44 45 46 47 48 49 50 51 53 55 56 57 59 60 61 63 64 65 66 67 68/**DropDownMenu**/ / * General menu container * / .menu {display: block; height: 28px; position: relative;} / * first-level menu * / .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: # 5a5a5a5a; line-height: 38px; z-index: 2;} / * external container style of secondary menu * / .menu dd {position: absolute; width: 100%; margin-top: 40px; left: 0; z-index:-99 } / * second-level menu normal style * / .menu li {font-size: 14px; line-height: 34px; color: # 5757; height: 34px; display: block; padding-left: 8px; background-color: # fff; border-bottom: 1px solid # dbdbdb;} / * Secondary menu highlight style * / .menu li.highlight {background-color: # f4f4f4; color: # 48c23d;} / * Show and hide * / .show {/ * block * / visibility: visible;} .hidden {/ * display: none;*/ visibility: hidden;}

Wxml

?

1 2 3 4 5 6 7 8 9 10 11 {{menuItem.reportType}} {{chilItem.Name}} time: {{dateValue}}

Js

?

12 34 56 78 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 Universe / data source var ReportDataSync = [{reportType: daily 1 " ChilItem: [{ID: 1, Name: "Daily 1", ReportUrl: "DailyReport.aspx", Type: 1}, {ID: 2, Name: "Daily 2", ReportUrl: "DailyReport.aspx", Type: 1}, {ID: 3, Name: "Daily 3", ReportUrl: "DailyReport.aspx", Type: 1}]}, {reportType: "Directory 2", chilItem: [{ID: 1, Name: "Catalog 1" ReportUrl: "DailyReport.aspx", Type: 2}, {ID: 2, Name: "directory 2", ReportUrl: "DailyReport.aspx", Type: 2}, {ID: 3, Name: "directory 3", ReportUrl: "DailyReport.aspx", Type: 2}, {ID: 4, Name: "directory 4", ReportUrl: "DailyReport.aspx", Type: 2}]}, {reportType: "monthly report 3", chilItem: [{ID: 1 " Name: monthly report 1, ReportUrl: DailyReport.aspx, Type: 1}, {ID: 2, Name: monthly report 2, ReportUrl: "DailyReport.aspx", Type: 2}] / / definition field var initSubMenuDisplay = [] var initSubMenuHighLight = [] var initAnimationData = [] / / initialize DropDownMenu loadDropDownMenu () that.setData ({reportData: ReportDataSync,// menu data subMenuDisplay: initSubMenuDisplay, / / level 1 subMenuHighLight: initSubMenuHighLight / / second-level animationData: initAnimationData / / Animation}) / / first-level menu click tapMainMenu: function (e) {/ / get the current first-level menu logo var index = parseInt (e.currentTarget.dataset.index) / / change the display status for (var I = 0; I < initSubMenuDisplay.length) ) {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)} / / Click tapSubMenu: function (e) {/ / hide all first-level menus / / this.setData ({/ / subMenuDisplay: initSubMenuDisplay () / /}) / / the logo of the current secondary menu var indexArray = e.currentTarget.dataset.index.split ('-'); / / delete the secondary menu style for (var I = 0; I < initSubMenuHighLight.length; iTunes +) {if (indexArray [0] = = I) {for (var j = 0; j < initSubMenuHighLight.length; jacks +) {initSubMenuHighLight [I] [j] ='' } / / add styles to the current secondary menu initSubMenuHighLight [indexArray [0]] [indexArray [1]] = 'highlight'; / / refresh style this.setData ({subMenuHighLight: initSubMenuHighLight}); / / animate this.animation (indexArray [0]) }, / / menu animation animation: function (index) {/ / define an animation var animation = wx.createAnimation ({duration: 400, timingFunction: 'linear',}) / / whether to show or hide var flag = this.data.subMenuDisplay [index] = =' show'? 1:-1; / / translate the Y axis animation.translateY (flag * ((initSubMenuHighlight [index] .length + 1) * 38). Step () / / Export to data and bind to the view attribute var animationStr = animation.export (); / / the original data var animationData = this.data.animationData; animationData [index] = animationStr; this.setData ({animationData: animationData});} / initialize DropDownMenu / 1. First-level directory initSubMenuDisplay: ['hidden'] / 2. Secondary directory initSubMenuHighLight: [[','], [',']] / / function loadDropDownMenu () {for (var I = 0; I < ReportDataSync.length; iTunes +) {/ / first-level directory initSubMenuDisplay.push ('hidden') / / secondary directory var report = [] for (var j = 0; j < ReportDataSync [I] .chilItem.length Jacks +) {report.push (['])} initSubMenuHighLight.push (report) / / Animation initAnimationData.push (")} above are all the contents of this article" how to make WeChat Mini Programs drop-down box components ". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.