WeChat applet implements pop-up menu function

Recent projects require such a requirement. When the user clicks the tab bar button, the menu will pop up downwards. Click again to retract the menu. Next, this article will introduce you to the pop-up menu function of the WeChat applet. Friends who are interested should take a look.

Requirements

Click the tab bar button to pop up the menu, click again to retract the menu

##Problems to be solved

1. Tab bar three-column style, the tab bar is fixed;

2. Click the tab bar to pop up the menu, and a transparent mask appears;

3. The mask priority is under the pop-up box;

4. Settings of labels in the pop-up box;

5. Scroll bar scroll bar hiding

   
   

How to solve it?

1. Flexible layout, horizontal, the three equally divide the entire column;

2. State monitoring click event, data Control hide or show, set transparency through rgba

3. Pop-up box sets z-index;

4. Flexible layout flex wrap and then space after the horizontal arrangement exceeds -around control spacing

::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

##Specific implementation
wxml

    城市筛选    职位筛选    排序方式       {{item}}       {{item.title}}   {{type}}     确认      智能排序 时间排序 薪资排序