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