微信小程序实现弹出菜单功能

需求

点击标签栏按钮，向下弹出菜单，再次点击，收回菜单

要解决的问题

1. 标签栏三栏样式，标签栏固定不动；
2. 点击标签栏弹出菜单，并且出现透明遮罩；
3. 遮罩优先级在弹出框之下；
4. 弹出框内标签的设置；
5. 滚动栏滚动条的隐藏
   

如何解决？

1. 弹性布局，横向，三者平分整栏;
2. 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度
3. 弹出框设置z-index；
4. 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距

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

具体实现

wxml

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