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

This article will explain in detail how WeChat Mini Programs makes the drop-down menu. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

WeChat Mini Programs drop-down menu ideas and steps:

In terms of layout, the overall use of dl to write, secondary packages in dd, using ul li to write; interaction, click on a level of menu, close the brother submenu, click on a submenu to close all menus.

1. Use dt to make the first-level menu

two。 Use dd to nest the second-level menu, initially hide, position is absolute, and use z-index to float out the page layer

/ * Master menu container * / .menu {display: block;height: 38px;} / * first-level menu * / .menu dt {font-size: 15px float float width: 33% position height: 38pxborderlyright: 1px solid # d2d2d2; border-bottom: 1px solid # d2d2d2; text-align: center;background-color: # f4f4f4; color: # 5a5a5a5alineheight: 38px;} / * external container style of secondary menu * / .menu dd {position: absolute;width: 100% control 39px Left:0;z-index:999;} / * second-level menu normal style * / .menu li {font-size: 14px; line-height: 34pxash color: # 5757 dbdbdb; height: 34pxash display: block;padding-left: 8px; background-color: # fff;border-bottom: 1px solid # dbdbdb;}

Check the effect, and then implement the click event.

As shown in the picture

3.dt binds the click event tapMainMenu,flag to control the explicit and hidden toggle, providing two class,hidden and show to control the explicit and hidden. Note: dt can also be bindTap, not just view.

/ * Show and hide * / .show {display: block;} .hidden {display: none;} web front-end development http://www.51xuediannao.com/

4. Close all first-level menus, and each first-level menu has an index logo, which is passed by the tapMainMenu event and corresponds to the array subMenuDisplay. The current element subMenuDisplay [index] depends on the original state to determine whether to show or hide.

Core code:

The price sub1sub2 / / initializes the array with function, which is more flexible than the reference replication avoided by var initSubMenuDisplay = []. It can be implemented in a variety of ways in the future, and the number of function initSubMenuDisplay () {return ['hidden',' hidden', 'hidden'] } Page ({data: {subMenuDisplay:initSubMenuDisplay ()}, tapMainMenu: function (e) {/ / get the currently displayed first-level menu ID var index = parseInt (e.currentTarget.dataset.index); / / generate an array, all hidden, show only the current var newSubMenuDisplay = initSubMenuDisplay (); / / hide if it is currently displayed, and vice versa. Also hide the other menus if (this.data.subMenuDisplay [index] = = 'hidden') {newSubMenuDisplay [index] =' show';} else {newSubMenuDisplay [index] = 'hidden';} / / set to the new array this.setData ({subMenuDisplay: newSubMenuDisplay});}})

5. Select the current item of the second-level menu, but give a system icon and change the background color, bold the text, and also change the first-level menu title. A pop-up window is given in demo.

Declare the tapSubMenu method to listen for secondary click events

/ / get the currently displayed first-level menu logo tapSubMenu: function (e) {var index = parseInt (e.currentTarget.dataset.index); console.log (index); / / hide all first-level menu this.setData ({subMenuDisplay: initSubMenuDisplay ()});} add highlight effect / * second-level menu highlight style * / .menu li.highlight {background-color: # f4f4f4;}

Unlike the first-level menu, click highlighting is achieved by using a two-dimensional array, so that you can locate a second-level menu at a certain level, and then decide to show and hide. Change the layout file to:

100-500 500-1000 1000-3000 3000

The effect is as shown in the picture

The corresponding js code should be written as follows:

/ / declare initializing the highlighted state array function initSubMenuHighLight () {return [[','], [','], [',','];}

Click event

TapSubMenu: function (e) {/ / hide all first-level menus this.setData ({subMenuDisplay: initSubMenuDisplay ()}); / / deal with secondary menus, first get the currently displayed secondary menu ID var indexArray = e.currentTarget.dataset.index.split ('-'); console.log ("indexArray:" + indexArray); var newSubMenuHighLight = initSubMenuHighLight () / / unlike the first-level menu, there is no need to judge the current state. Just click to assign highlight to class and you can newSubMenuHighLight [indexArray [0]] [indexArray [1]] = 'highlight'; console.log (newSubMenuHighLight); / / set to the new array this.setData ({subMenuHighLight: newSubMenuHighLight});}

In this way, highlight and unhighlight are achieved. But it's not over, unlike the first-level menu, the sub-menu here and the brother are not mutually exclusive, that is to say, if you click on this menu, you can't cut the highlight of the brother menu across the board. So we improved the js code.

Declaration mode, change to the form of variables, easy to store.

/ / define initialization data, which is used to save var initSubMenuHighLight at run time = [[','], [','], [',',']; Click event tapSubMenu: function (e) {/ / hide all first-level menus this.setData ({subMenuDisplay: initSubMenuDisplay ()}) / / to process the secondary menu, first get the currently displayed secondary menu ID var indexArray = e.currentTarget.dataset.index.split ('-'); / / initialize the status / / var newSubMenuHighLight = initSubMenuHighLight; for (var I = 0; I < initSubMenuHighLight.length) +) {/ / if the menu in the dot is the primary menu, clear the status first, that is, the non-highlighted mode, and then the secondary menu in the highlight. If it is not the current menu, ignore it. After this processing, you can retain the highlight state of other menus if (indexArray [0] = = I) {for (var j = 0; j < initSubMenuHighLight [I]. Length +) {/ / clear initSubMenuHighLight [I] [j] ='' } / / set the second-level menu of the current menu back} / / unlike the first-level menu, there is no need to judge the current status, just click to assign highlight to class and initSubMenuHighLight [indexArray [0]] [indexArray [1]] = 'highlight' / / set to the new array this.setData ({subMenuHighLight: initSubMenuHighLight});}

Functional points to be improved:

1. Show and hide to drive the drawing down

two。 Abstraction, using the callback function, will listen for clicks on each secondary menu

3. The data source and display should be separated, the key value of the primary and secondary menus should be independent, and the system should only recognize index, and then process the corresponding clicks, jump to the page, filter the results, etc.

4. When you click the secondary menu, all groups will be cleared and need to be fixed.

This is the end of the article on "how WeChat Mini Programs makes the drop-down menu". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.