微信小程序，使用vant组件，实现底部弹出层做列表搜索的条件代码

使用vant组件实现底部弹出层做列表搜索的条件，可以使用van-popup和van-dropdown-menu组件结合使用。

1. 在wxml中引入van-popup和van-dropdown-menu组件，并设置相关属性。

<van-popup
  show="{{ showPopup }}"
  position="bottom"
  bind:close="onClosePopup"
  style="height: 85%;"
>
  <van-dropdown-menu
    :overlay="overlay"
    :active-color="activeColor"
    :z-index="zIndex"
    height="100%"
    @close="onCloseMenu"
  >
    <view slot="title" class="filter-title">
      <van-row>
        <van-col span="8" @click="onSelect(0)">
          <van-icon name="search" />
          <text>按关键词</text>
        </van-col>
        <van-col span="8" @click="onSelect(1)">
          <van-icon name="location-o" />
          <text>按地区</text>
        </van-col>
        <van-col span="8" @click="onSelect(2)">
          <van-icon name="clock-o" />
          <text>按时间</text>
        </van-col>
      </van-row>
    </view>
    <view slot="menu" class="filter-menu">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="关键词" name="0">
          <van-search
            v-model="keyword"
            :placeholder="placeholder"
            show-action
            @search="onSearch"
          />
        </van-collapse-item>
        <van-collapse-item title="地区" name="1">
          <van-area @confirm="onConfirmArea" />
        </van-collapse-item>
        <van-collapse-item title="时间" name="2">
          <van-datetime-picker
            type="datetime"
            :min-date="minDate"
            :max-date="maxDate"
            :value="date"
            @confirm="onConfirmDate"
          />
        </van-collapse-item>
      </van-collapse>
    </view>
  </van-dropdown-menu>
</van-popup>

2. 在js中设置相关属性和方法。

data: {
  // 是否显示弹出层
  showPopup: false,
  // 当前选择的筛选条件
  activeIndex: 0,
  // 筛选条件选项
  overlay: false,
  activeColor: '#ee0a24',
  zIndex: 99,
  // 关键词搜索
  keyword: '',
  placeholder: '请输入关键词',
  // 地区搜索
  region: [],
  // 时间搜索
  minDate: new Date(2020, 0, 1).getTime(),
  maxDate: new Date().getTime(),
  date: new Date().getTime(),
  // 当前展开的筛选条件项
  activeNames: ['0']
},
methods: {
  // 打开弹出层
  onShowPopup() {
    this.showPopup = true;
  },
  // 关闭弹出层
  onClosePopup() {
    this.showPopup = false;
  },
  // 选择筛选条件
  onSelect(index) {
    this.activeIndex = index;
    this.activeNames = [index.toString()];
    this.onShowPopup();
  },
  // 关键词搜索
  onSearch() {
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 地区搜索
  onConfirmArea(value) {
    this.region = value;
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 时间搜索
  onConfirmDate(value) {
    this.date = value.getTime();
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 关闭筛选条件项
  onCloseMenu() {
    this.activeIndex = -1;
  }
}

这样就能够实现底部弹出层做列表搜索的条件了。