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

由于vant组件库是基于Vue.js框架开发的，因此在原生小程序中使用vant组件需要进行一些适配工作。以下是使用vant组件库实现底部弹出层做列表搜索条件的原生小程序代码：

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

<view class="page">
  <van-popup
    id="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">
        <view class="row">
          <view class="col" bindtap="onSelect" data-index="0">
            <van-icon name="search" />
            <text>按关键词</text>
          </view>
          <view class="col" bindtap="onSelect" data-index="1">
            <van-icon name="location-o" />
            <text>按地区</text>
          </view>
          <view class="col" bindtap="onSelect" data-index="2">
            <van-icon name="clock-o" />
            <text>按时间</text>
          </view>
        </view>
      </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>
</view>

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

Page({
  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']
  },
  // 打开弹出层
  onShowPopup() {
    this.setData({
      showPopup: true
    });
  },
  // 关闭弹出层
  onClosePopup() {
    this.setData({
      showPopup: false
    });
  },
  // 选择筛选条件
  onSelect(event) {
    const index = event.currentTarget.dataset.index;
    this.setData({
      activeIndex: index,
      activeNames: [index.toString()]
    });
    this.onShowPopup();
  },
  // 关键词搜索
  onSearch() {
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 地区搜索
  onConfirmArea(event) {
    const value = event.detail.values;
    this.setData({
      region: value
    });
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 时间搜索
  onConfirmDate(event) {
    const value = event.detail;
    this.setData({
      date: value.getTime()
    });
    this.onClosePopup();
    // 发起搜索请求
    // ...
  },
  // 关闭筛选条件项
  onCloseMenu() {
    this.setData({
      activeIndex: -1
    });
  }
});

这样就能够在原生小程序中使用vant组件库实现底部弹出层做列表搜索条件了。