一般来说的话，总有点需要下拉并且能够搜索选择的需求。

首先wxml

<!-- 下拉菜单   -->
    <view class='menu-po'>
      <!-- 请选择 -->
      <view class='menu'>
        <view class='menu-list'>
          <view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick">
            <text class='menu-text'>{{ item.name }}</text>
            <image class='menu-image' src='/pages/img/pull.png'></image>
          </view>
        </view>
      </view>
      <!-- 列表栏 -->
      <view class='menu-if'>
        <!-- 区域 -->
        <view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}'>
          <scroll-view scroll-y="true" style="height: 446rpx">
            <text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'>{{ item.name }}</text>
          </scroll-view>
        </view>

      </view>
    </view>

其次是wxss

.menu-po {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 25%;
  margin-left: 5%;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.menu-list {
  display: flex;
  justify-content: space-between;
}

.menu-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-nav2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-nav2 image {
  width: 24rpx;
  height: 15rpx;
}

.menu-nav2 text {
  font-size: 14px;
}

.menu-nav image {
  width: 24rpx;
  height: 15rpx;
}

.menu-nav text {
  color: #696969;
  font-size: 14px;
}

.shadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  position: absolute;
  top: 210rpx;
}

.menu-if {
  background-color: #fff;
  box-sizing: border-box;
  position: absolute;
  z-index: 9;
  margin-left: -15px;
  width: 100%;
}

.swiper-item {
  background: #fff;
  width: 100%;
  height: 600rpx;
  display: none;
  position: absolute;
  top: 100rpx;
  z-index: 333333;
  left: 0;
  animation: displays 1s;
}

.meun-txt {
  height: auto;
  color: #696969;
}

.menu-text-list {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.menu-text-list-left {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 35rpx;
}

/* text样式 */

.meun-city-txt {
  display: block;
  border-bottom: 1rpx solid #e9e9e9;
  width: 100%;
  padding: 25rpx 0;
  font-size: 14px;
}

.meun-city-txt-price {
  display: flex;
  justify-content: center;
}

.menu-text-list-rig {
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f9f9f9;
  z-index: 10;
  box-sizing: border-box;
  padding-left: 35rpx;
}

最后是js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msgList: [{
      key: 1,
      name: '请选择'
    }],
    // 判断导航栏列表是否显示
    meunShow: [{
      isShows: true
    }],
    sousuoList: [{
      id: 1,
      name: '新房'
    }, {
      id: 2,
      name: '二手房'
    }, {
      id: 3,
      name: '写字楼'
    }, {
      id: 4,
      name: '商铺'
    }, {
      id: 5,
      name: '出租'
    }],
  },
  souSearch: function (e) {
    var that = this;
    var openPicker = this.data.openPicker;
    var house_name = e.target.dataset.name;

    var msgList = that.data.msgList;
    this.setData({
      openPicker: !openPicker,
    })
    for (var i = 0; i < msgList.length; i++) {
      var keys = msgList[i].key;
      if (keys == 1) {
        msgList[i].name = house_name;
        that.setData({
          msgList: msgList,
          house_name: house_name
        })
      }
    }


    var menuNum = that.data.menuNum;
    var meunShow = this.data.meunShow;
    var menuSrc = "meunShow[" + menuNum + "].isShows";
    // console.log('menuNum:' + menuNum);
    for (var n = 0; n < meunShow.length; n++) {
      // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
      var menuSrcs = meunShow[n].isShows;
      // console.log('menuSrcs:' + menuSrcs);
      // 解决重复点击不能隐藏的问题
      if (n != menuNum) {

        this.setData({
          menuSrcs: true
        });
      };
    };

    // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏
    this.setData({
      [menuSrc]: !this.data.meunShow[menuNum].isShows
    });

  },

  menuClick: function (e) {
    // 获取通过wxml  data-hi="{{ idx }}" 传过来的索引
    var that = this;
    var menuNum = e.currentTarget.dataset.hi;
    that.setData({
      menuNum: menuNum
    })
    var name = e.currentTarget.dataset.name;
    if (name == that.data.name) {
      // console.log('==');
      that.setData({
        openPicker: !this.data.openPicker,
      })
    } else {
      // console.log('!=');
      that.setData({
        openPicker: true,
      })
    }

    that.setData({
      name: name
    })
    // console.log(name + ',' + menuNum);
    // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
    var menuSrc = "meunShow[" + menuNum + "].isShows";
    // console.log('picker:' + this.data.openPicker);
    this.setData({
      needAnimation: true,
      menuNums: menuNum + 1
    });

    // 循环data中设置的meunShow
    for (var n = 0; n < this.data.meunShow.length; n++) {
      // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
      var menuSrcs = "meunShow[" + n + "].isShows";
      // 解决重复点击不能隐藏的问题
      if (n != menuNum) {
        // 初始化，每次点击时先全部隐藏，但是重复点击不会隐藏
        this.setData({
          [menuSrcs]: true
        });
      };
    };

    // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏
    this.setData({
      [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
    });
  },
  })

这就是下拉选择框的全部代码了。