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

页面wxml代码如下：

  <!-- 下拉菜单栏 -->
  <view class='list'>
    <ul class="font_s30">
      <li bindtap="getNav" data-id='area' style="color:{{c_area}}">
        <view>
          <span class = "l_name" id="area">{{area}}</span>
          <image src='{{url}}' style='width:20rpx; height:16rpx'></image>
        </view>
      </li>
      <li bindtap="getNav" data-id='position' style="color:{{c_position}}">
        <view>
          <span class = "l_name" id="position" >{{position}}</span>
          <image src='{{url1}}' style='width:20rpx; height:16rpx'></image>
        </view>
      </li>
      <li bindtap="getNav" data-id='price' style="color:{{c_price}}">
         <view>
          <span class = "l_name" id="price">{{price}}</span>
          <image src='{{url2}}' style='width:20rpx; height:16rpx'></image>
        </view>
      </li>
      <li bindtap="getNav" data-id='cast' style="color:{{c_cast}}">
         <view>
          <span class = "l_name" id="cast">{{cast}}</span>
          <image src='{{url3}}' style='width:20rpx; height:16rpx'></image>
        </view>
      </li>
    </ul>
  </view>
   <!-- 下拉显示列表-->
     <view class='area' hidden="{{show}}">
    <view class='selectList'>
      <p wx:for="{{content}}" wx:key="item.code" id="{{item.code}}" data-name="{{item.name}}" class="s_list font_s33 {{listColor==tap+ item.code?'a_color':''}}"  bindtap="liCheck">{{item.name}}</p>
    </view>
  </view>
  

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);
  },

实现效果如下：