微信小程序+Vant-自定义选择器组件（单选带筛选

实现效果

筛选是filter，搜索框如有显隐需要，需自行添加配置显隐参数
弹出层高度样式需要手动修改，需自行添加配置高度参数
.json文件配置"component": true,

实现代码

组件代码

html 复制代码

<van-popup show="{{ show }}" position="bottom" round custom-style="height:100%;z-index:2000;" class="relative">
  <view class="pd-30 mb-30 fixed pickerTop w100 bg-white">
    <view class="flex">
      <view class="gray-3 fs14" bindtap="close">取消</view>
      <view class="pickerText bold">{{title}}</view>
      <view class="fs14" style="color: {{colorStyle}};" bindtap="getData">确认</view>
    </view>
    <view class="pd-20 mt-40 bg border radius-10 flex_l">
      <image src="../../../assets/img/search1.png" style="width: 40rpx;height: 40rpx;" mode="" class="mr-20" />
      <input bindinput="getSearch" placeholder="请输入">
      </input>
    </view>
  </view>
  <view class="plr-30 mulPicker">
    <van-checkbox-group value="{{ value }}" bind:change="onChange">
      <van-cell-group>
        <van-cell wx:for="{{ dataList }}" wx:key="index" value-class="value-class" clickable data-index="{{ index }}" bind:click="toggle">
          <van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" checked-color="{{colorStyle}}" name="{{ item.dictValue * 1 }}">
            {{item.dictLabel}}
          </van-checkbox>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </view>
</van-popup>

js 复制代码

// pages/menu/components/pickDateTime.js
Component({
  options: {
    addGlobalClass: true, // 可允许外部修改样式
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: Boolean,// 是否显示弹出层
    title: String, // 弹出层标题
    columns: {
      type: Array,
      value: [],
      observer: function () {
        this.handleData();
      }
    }, // 选择的数据
    value: Array,  // 选中的值
    colorStyle: {
      type: String,
      value: "#3772E9"
    },
    flag: String, // 1-服务对象 2-位置
  },
  /**
   * 组件的初始数据
   */
  data: {
    selectItem: null,
    dataList: [],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleData() {
      this.setData({
        dataList: this.data.columns
      })
    },
    getData() {
      this.triggerEvent("getData", this.data.selectItem);
      this.close();
    },
    onChange(e) {
      console.log(e.detail);
      let item
      let list
      if (e.detail.length > 0) {
        if (e.detail.length > 1) {
          list = e.detail.splice(1, 1)
        } else {
          list = e.detail
        }
        item = this.properties.columns.find(r => r.dictValue == list[0])
      } else {
        item = null
        list = []
      }
      this.setData({ value: list, selectItem: item });
    },
    close() {
      console.log("pick");
      this.triggerEvent("close");
    },
    toggle(event) {
      const { index } = event.currentTarget.dataset;
      const checkbox = this.selectComponent(`.checkboxes-${index}`);
      checkbox.toggle();
    },
    noop() { },
    getSearch(event) {
      let { value, cursor, keyCode } = event.detail
      //keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。
      /* wx.http('yourHttpUrl', {
        name: value
      }, 'post').then(data => {
        console.log('getSearch');
        let list = data.map(r => {
          return {
            ...r,
            dictValue: r.olderId,
            dictLabel: r.olderName
          }
        })
        this.setData({
          columns: list
        })
      }) */
      let list = this.data.columns.filter(item => item.nodeName?.includes(value))
      this.setData({
        dataList: value ? list : this.data.columns
      })
    }
  },
})

css 复制代码

/* pages/menu/components/pickDateTime.wxss */
.pickerText {
  font-size: 16px;
}

.pickerTop {
  border-radius: 50rpx 50rpx 0 0;
  z-index: 2000;
}

.mulPicker {
  margin-top: 240rpx;
}

.value-class {
  flex: none !important;
}

页面使用

html 复制代码

<w-picker show="{{show}}" columns="{{columns}}" title="{{title}}" bindgetData="getData" colorStyle="{{colorStyle}}" bindclose="close" />

js 复制代码

  getData(e) {
    console.log(e.detail);
    this.close();
  },
  close() {
    this.setData({
      show: false,
    })
  },