封装能搜索的小程序picker

需求是这样子的，微信原生的满足不了这种，所以自己封装了个组件

这个组件用到了vant 这个框架 里的vant-search ,也可以不用自己写个input,方法都是一样的

wxml部分

<view class="date-background" hidden="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker'>取消</view>
        <van-search
          value="{{searchValue}}"
          input-align="center"
          placeholder="请输入关键词"
          bind:change="search"
        />
        <view bindtap='confirm'>确定</view>
      </view>
      <picker-view
        indicator-class="indicator"
        value="{{setValues}}"
        bindchange="bindChange"
        bindpickend="_bindpickend"
        immediate-change="{{true}}" 
      >
 
        <picker-view-column class="pickViewColumn">
          <text wx:for="{{items}}" wx:key="index" style="color:#000;line-height:46px;text-align:center;display:block" decode="{{true}}" >{{item.name}}</text>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

Component({
  options: {
    // 在组件定义时的选项中启用多slot支持
    multipleSlots: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 初始化日期
    initValue: {
      type: String,
      value: "",
    },
    // 父组件传递过来的数据列表
    items: {
      type: Array,
      value: [],
    },
    Values: {
      type: Number,
      value:0,
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    //控制picker的显示与隐藏
    flag: true,
    // 用户输入的item关键词
    searchValue: "",
    // 滚动选择的item
    setValues: [],
    // 滚动选择的item索引
    selectIndex: "",
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * @name: 搜索item
     * @date: 20211129
     */
     search(e) {
      console.log('触发search事件')
      let self = this;
      self.triggerEvent("handleSearch", e.detail);
    },
    /**
     * @name: 隐藏picker
     * @date: 20211129
     */
    hiddeDatePicker() {
      let self = this;
      self.setData({
        flag: !self.data.flag,
        searchValue: "",
      });
    },
    /**
     * @name: 展示picker
     * @date: 20211129
     */
    showDatePicker() {
      let self = this;
      self.setData({
        flag: !self.data.flag,
      });
      self.getItems();
    },
    /**
     * @name: 选择好item后，点击确定
     * @date: 20211129
     */
    confirm() {
      let self = this;
      // 获取用户选择的item
      console.log(self.data.selectIndex, "self.data.selectIndex");
      let item = self.data.items[self.data.selectIndex]
        ? self.data.items[self.data.selectIndex]
        : self.data.items[0];
      let selectIndex = self.data.selectIndex;
      // 通过发送自定义事件把用户选择的item传递到父组件
      console.log(item, "itemitem");
      //取name 是因为从父组件传来的数据 格式已经处理成name:xxxxx
      self.triggerEvent("confirm", {
        name: item.name,
        toback: item.toback, //传到后台的数据
        selectIndex: selectIndex,
      });
    },
    /**
     * @name: 用户滚动picker时，获取滚动选择的索引
     * @author: camellia
     * @date: 20211129
     */
    bindChange(e) {
      let self = this;
      console.log(e, "eee");
      self.setData({
        // 用户选择的item索引
        selectIndex: e.detail.value[0],
      });
    },
    /**
     * @name: 获取初始化信息
     * @date: 20211130
     */
    getItems(e) {
      let self = this;
      console.log(self.data.items, "获取父组件的item");
      console.log(self.data.initValue, "initValue");
      console.log(self.data.Values, "Values");
      if (self.data.items[0].name) {
        self.setData({
          setValues: [self.data.Values],
        });
      } else {
//如果没有数据
        self.setData({
          setValues: [0],
        });
        console.log(self.data.setValues,"setValuessetValues")
      }

      
    },
  },
});

.date-background {
  /* position: absolute; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}
.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
}
.date-container {
  position: absolute;
  width: 100%;
  height: 900rpx;
  overflow: hidden;
  background: #fff;
  bottom:0;
  z-index: 1000;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20rpx;
  font-size:34rpx;
  line-height: 70rpx;
  color:var(--ThemeColor)
}
.pickViewColumn{
  height: 900rpx;
  /* margin-top: -300rpx; */
  /* text-align: center; */
 text-align: left;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}

{
    "component": true,
    "usingComponents": {
        "van-search": "../../../../miniprogram_npm/@vant/weapp/search/index"
    }
}

在引用的页面 wxml上写

<myPicker id="demopicker" items="{{pickerItems}}" Values="{{pickerItemsIndex}}" bindhandleSearch="handleSearch" bindconfirm="confirm"></myPicker>