微信小程序 下拉菜单实现

效果：

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