微信小程序下拉菜单功能的实现

页面wxml代码如下：

  
  
    

      

        
          {{area}}
          
        
      
      

        
          {{position}}
          
        
      
      

         
          {{price}}
          
        
      
      

         
          {{cast}}
          
        
      
    
  
   
     
  

js代码如下：

  data: {
  show:true,
  content:",
  },
getNav: function(e) {
    var id = e.currentTarget.dataset.id; 
    var that = this;
    var url = "/apid/r/4";
    var pram = "";
    if(id == "area"){
      that.setData({
        url: "/images/menu/unselect.png",
      })    

    }else if(id == "position"){
      that.setData({
        url1: "/images/menu/unselect.png",
      }) 
    }else if(id == "price"){
      that.setData({
        url2: "/images/menu/unselect.png",
      }) 
    } else if (id == "cast") {
      that.setData({
        url3: "/images/menu/unselect.png",
      }) 
    }
    util.wxRequest(url, pram, null, function(data) {
      data.push({
        code:'',
        name:'不限'
      })
      that.setData({
        show: false,
        content:data
      })
    }, null, that);
  },

实现效果如下：