页面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);},
实现效果如下: