WeChat applet WXDropDownMenu component details and instance code, dropdownmenu

Detailed description of the WXDropDownMenu component and instance code of the applet, dropdownmenu

The WXDropDownMenu component of the applet is described in detail. Here is a small example to help you learn and understand,

Function: Applicable to product list filtering and function menu navigation

Let's take a look at the following:

Ideas and steps:

In terms of layout, dl is used for writing as a whole, while the level-2 package is in dd and ul li is used for writing. In terms of interaction, click a level-1 menu to close the sibling menu, click a sub-menu to close all menus.

1. Use dt to make the first menu

2. Use dd to nest the second-level menu, initially hide and position is absolute, and use z-index to pop up the page Layer

/* Total menu container */. menu {display: block; height: 38px;}/* level-1 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: # 5a5a5a; line-height: 38px;}/* level-2 Menu External container style */. menu dd {position: absolute; width: 100%;/* hack */top: 39px; left: 0; z-index: 999;}/* level-2 menu normal style */. 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 ;}

View the effect, and then click the event.

3. dt bind the Click Event tapMainMenu. The flag controls explicit and hidden toggle and provides two classes, den and show, to control explicit and hidden events. Note: dt can also bindTap, not just view.

/* Display and hide */. show {display: block;}. hidden {display: none ;}

4. close all level-1 menus. Each level-1 menu has an index identifier, which is passed by the tapMainMenu event and corresponds to the array subMenuDisplay one by one, the status of the current element subMenuDisplay [index] depends on whether it is displayed or hidden.

Core code:

<Dl class = "menu"> <dt data-index = "0" bindtap = "tapMainMenu"> price </dt> <dd class = "{subMenuDisplay [0]}} "> <ul> <li> sub1 </li> <li> sub2 </li> </ul> </dd> </dl>

// Use the function to initialize the array. Compared with var initSubMenuDisplay = [], this method avoids reference replication and is more flexible. In the future, it can be implemented in multiple ways, with a variable number of function initSubMenuDisplay () {return ['den den ', 'den den', 'den den '];} Page ({data: {subMenuDisplay: initSubMenuDisplay ()}, tapMainMenu: function (e) {// obtain the currently displayed first-level menu ID var index = parseInt (e. currentTarget. dataset. index); // generate an array, all of which are hidden. Only the current var newSubMenuDisplay = initSubMenuDisplay () is displayed. // if the current display is hidden, and vice versa. At the same time, you need to hide other menus if (this. data. subMenuDisplay [index] = 'den den ') {newSubMenuDisplay [index] = 'show';} else {newSubMenuDisplay [index] = 'den den ';} // set it to the new array this. setData ({subMenuDisplay: newSubMenuDisplay });}});

5. Select the current item of the level-2 menu, but give a System icon and change the background color. The text is bold and the title of the level-1 menu is also changed. A pop-up window is displayed in the demo.

Declare the tapSubMenu method and listen to second-level click events

TapSubMenu: function (e) {// obtain the currently displayed level-1 menu ID var index = parseInt (e. currentTarget. dataset. index); console. log (index); // hide all level-1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()});}

Add highlight Effect

/* Two-level menu highlight style */. menu li. highlight {background-color: # f4f4f4 ;}

Unlike a level-1 menu, click highlight is implemented using a two-dimensional array to locate a level-1 level-2 menu and decide to hide it. Change the layout file:

<Dd class = "{subMenuDisplay [0]}"> <ul> <li class = "{subMenuHighLight [0] [0]}" data-index =" 0-0 "bindtap =" tapSubMenu "> less than 100 </li> <li class =" {subMenuHighLight [0] [1]} "data-index =" 0- 1 "bindtap =" tapSubMenu "> 100-500 </li> <li class =" {subMenuHighLight [0] [2]} "data-index =" 0-2 "bindtap =" tapSubMenu "> 500-1000 </li> <li class =" {subMenuHighLight [0] [3]} "data-index =" 0-3" bindtap = "tapSubMenu"> 1000-3000 </li> <li class = "{subMenuHighLight [0] [4]}" data-index = "0-4" bindtap = "tapSubMenu"> more than 3000 </li> </ul> </dd>

Effect

The corresponding js Code should be written as follows:

// Declare the array of initialization highlights

function initSubMenuHighLight() {  return [    ['','','','',''],    ['',''],    ['','','']  ];}

Click Event

TapSubMenu: function (e) {// hide all level 1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()}); // process the second-level menu. First, obtain the currently displayed second-level menu ID var indexArray = e. currentTarget. dataset. index. split ('-'); console. log ("indexArray:" + indexArray); var newSubMenuHighLight = initSubMenuHighLight (); // unlike the first-level menu, the current status does not need to be determined here, you only need to click and assign highlight to the class. newSubMenuHighLight [indexArray [0] [indexArray [1] = 'highlight'; console. log (newSubMenuHighLight); // set it to the new array this. setData ({subMenuHighLight: newSubMenuHighLight });}

In this way, highlight and unhighlight are realized. However, unlike the level-1 menu, this menu is not mutually exclusive with the brother menu. That is to say, you cannot remove the highlight state of the brother menu when you click this menu. So we improved the js Code.

Declaration method, use the variable form for convenient storage.

// Define the initialization data. It is used to save var initSubMenuHighLight = [['',''], ['',''], ['','', ''];

Click Event

TapSubMenu: function (e) {// hide all level 1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()}); // process the second-level menu. First, obtain the currently displayed second-level menu ID var indexArray = e. currentTarget. dataset. index. split ('-'); // initialization status // var newSubMenuHighLight = initSubMenuHighLight; for (var I = 0; I <initSubMenuHighLight. length; I ++) {// If a level-1 menu is selected, the state is cleared first, that is, the non-highlighted mode, and then the level-2 menu in the Highlights; if it is not the current menu, ignore it. After this processing, the highlighted state of other menus can be retained if (indexArray [0] = I) {for (var j = 0; j <initSubMenuHighLight [I]. length; j ++) {// implement clearing initSubMenuHighLight [I] [j] = '';} // set the second-level menu of the current menu back} // unlike the first-level menu, the current status does not need to be determined here, you only need to click and assign highlight to the class. Then, initSubMenuHighLight [indexArray [0] [indexArray [1] = 'highlight'; // set it to the new array this. setData ({subMenuHighLight: initSubMenuHighLight });}

Functions to be improved:

1. Show and hide the animation drop-down list

2. Abstract: The callback function is used to listen to the click of each level-2 menu.

3. The data source and display should be separated. The key values of level 1 and level 2 menus should be independent. The system only recognizes the index and then processes the corresponding clicks, jumps to the page, and filters the results.

4. When you click the level-2 menu, all groups will be cleared.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!