效果:
.wxml
<view catchtap="select_item" data-item="1" class="item">{{area}}
<image class="right_img" src="{{area_img}}"></image>
</view>
<view catchtap="select_item" data-item="2" class="item">{{rent}}
<image class="right_img" src="{{rent_img}}"></image>
</view>
<view catchtap="select_item" data-item="3" class="item">{{house_type}}
<image class="right_img" src="{{house_type_img}}"></image>
</view>
<!-- 列表 -------------------- -->
<view class="item_list{{!select_area?' item_list_hide':' item_list_show'}}">
<view wx:for="{{area_list}}" wx:key="{{index}}" catchtap="select_area" data-index="{{index}}" class="list">{{item.value}}</view>
</view>
<view class="item_list{{!select_rent?' item_list_hide':' item_list_show'}}">
<view wx:for="{{rent_list}}" wx:key="{{index}}" catchtap="select_rent" data-index="{{index}}" class="list">{{item.value}}</view>
</view>
<view class="item_list{{!select_house_type?' item_list_hide':' item_list_show'}}">
<view wx:for="{{housetype_list}}" wx:key="{{index}}" catchtap="select_house_type" data-index="{{index}}" class="list">{{item.value}}</view>
</view>
..wxss
.item {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1%;
width: 31%;
height: 40px;
border: 0.5px solid #ccc;
border-left: none;
border-top: none;
float: left;
}
.item_last{
border-right: none;
}
.right_img {
height: 30rpx;
width: 30rpx;
}
.item_list{
margin-top: 2rpx;
position: absolute;
top: 80rpx;
left: 0;
width: 100%;
background-color: #fff;
z-index: 100;
font-size: 14px;
border-bottom: 1rpx solid #ddd;
}
.item_list_show{
top: 35px;
animation: slide 500ms;
}
.item_list_hide{
display: none !important;
}
@keyframes slide {
0% {
top: 25px;
}
100% {
top: 35px;
}
}
.list{
height: 80rpx;
line-height: 80rpx;
padding: 0 40rpx;
border-bottom: 1rpx solid #ddd;
}
.js
Page({
data: {
// 下拉菜单 ---------------------------------
area_list: [
{ key: 1, value: "市南区" },
{ key: 2, value: "市北区" },
{ key: 3, value: "李沧区" },
{ key: 4, value: "崂山区" },
{ key: 5, value: "城阳区" },
],
rent_list: [
{ key: 1, value: "500-1000" },
{ key: 2, value: "1000-2000" },
{ key: 3, value: "2000-3000" },
{ key: 4, value: "3000以上" },
],
housetype_list: [
{ key: 1, value: "两室一厅" },
{ key: 2, value: "三室一厅" },
{ key: 3, value: "别墅" },
],
area: '区域',
rent: '租金',
house_type: '户型',
area_img: "/image/icon-go-black.png",
rent_img: "/image/icon-go-black.png",
house_type_img: "/image/icon-go-black.png",
select_area: false,
select_rent: false,
select_house_type: false,
},
// 类型选择
select_item: function (e) {
switch (e.currentTarget.dataset.item) {
case "1":
if (this.data.select_area) {
this.setData({
area_img: "/image/icon-go-black.png",
select_area: false,
});
}
else {
this.setData({
area_img: "/image/icon-down-black.png",
rent_img: "/image/icon-go-black.png",
house_type_img: "/image/icon-go-black.png",
select_area: true,
select_rent: false,
select_house_type: false,
});
}
break;
case "2":
if (this.data.select_rent) {
this.setData({
rent_img: "/image/icon-go-black.png",
select_rent: false,
});
}
else {
this.setData({
area_img: "/image/icon-go-black.png",
rent_img: "/image/icon-down-black.png",
house_type_img: "/image/icon-go-black.png",
select_area: false,
select_rent: true,
select_house_type: false,
});
}
break;
case "3":
if (this.data.select_house_type) {
this.setData({
house_type_img: "/image/icon-go-black.png",
select_house_type: false,
});
}
else {
this.setData({
area_img: "/image/icon-go-black.png",
rent_img: "/image/icon-go-black.png",
house_type_img: "/image/icon-down-black.png",
select_area: false,
select_rent: false,
select_house_type: true,
});
}
break;
}
},
// 区域列表 -----------------------------------------
select_area: function (e) {
var index = e.currentTarget.dataset.index;
this.setData({
area_img: "/image/icon-go-black.png",
area: this.data.area_list[index].value,
select_area: false,
})
},
// 租金列表
select_rent: function (e) {
var index = e.currentTarget.dataset.index;
this.setData({
rent_img: "/image/icon-go-black.png",
rent: this.data.rent_list[index].value,
select_rent: false,
})
},
// 户型列表
select_house_type: function (e) {
var index = e.currentTarget.dataset.index;
this.setData({
house_type_img: "/image/icon-go-black.png",
house_type: this.data.housetype_list[index].value,
select_house_type: false,
})
},
})