自定义select组件

（声明：当前记录篇参考于该人员 https://www.jb51.net/article/166679.htm ）

一、创建组件

1.新建文件夹：select

2.新建Component: select

3.select.wxml：

<view style="width:{{_width}};height:{{_height}};" class="selectOuter">
  <input value="{{picker_value}}" class="select-input" bindinput="bindkeyinput" />
  <picker 
    style="width:30%;height:100%;"
    bindchange="bindchange" 
    value="{{ list2[index][actualvalue] }}" 
    range-key="{{ showvalue }}" 
    range="{{ list2 }}">
    <view class='select-icon'>
      <image src="../../static/images/xialajiantou.png" />
    </view>
  </picker>
</view>

4.select.wxss:

.selectOuter {
  display: flex;
  flex-direction: space-between;
  border-radius: 2px;
  border: 1px #ccc solid;
}

.select-input {
  margin-left: 10rpx;
  width: 80%;
  height: 100%;
  line-height: 60rpx;
  font-size: 24rpx;
}

.select-icon {
  width: 100%;
  height: 100%;
  /* background: red; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.select-icon>image {
  width: 40rpx;
  height: 36rpx;
  margin-right: 10rpx;
  margin-top: 19rpx;
}

5.select.js:

// components/hui-picker-input.js
const listvalue = [{
  id: '1',
  name: "张三"
}, {
  id: '2',
  name: "李四"
}]
let _self;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {//下拉框数据来源
      type: [Array, Object],
      value: listvalue,
      description: '数据源',
      observer(newVal, oldVal) {
        this.setData({
          list: newVal,
          list2: newVal
        })
     
      }
    },
    _width: {//组件宽度
      type: String,
      value: "100rpx"
    },
    _height: {//组件高度
      type: String,
      value: "100rpx"
    },
    actualvalue: { //实际值
      type: String,
      value: "id"
    },
    showvalue: { //显示值
      type: String,
      value: "name"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    picker_value: '',//输入框值
    index: 0,//下拉框下标
    list2: []//下拉框数据
  },
  created(e) {
    _self = this;
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //文本框输入事件
    bindkeyinput(e) {
      const _value = e.detail.value
      const _showvalue2 = this.data.showvalue;
      const _list = JSON.parse(JSON.stringify(this.data.list));
      const array = _list.filter(item => item[_showvalue2].indexOf(_value) != -1).map(item => {
        const result = JSON.parse(JSON.stringify(item));
        return result;
      })
      this.setData({
        list2: array
      })
    },
    //下拉框选择事件
    bindchange(e) {
      const _idx = e.detail.value;
      const _showvalue = this.data.showvalue;
      const _actualvalue = this.data.actualvalue;
      const list2_value = this.data.list2[_idx][_actualvalue];
      this.setData({
        index: _idx,
        list2: this.data.list,
        picker_value: this.data.list2[_idx][_showvalue]
      })
      this.fun(list2_value);
    },
    fun(list2_value) {
      this.triggerEvent("action", {
        id: list2_value
      });
    },
    
    // 清空input框中的信息。（便于父组件中清除操作使用。） 
    clearInput() {  
      var that = this;
      that.setData({ picker_value: '', });
    }
  }
});

二、引用：

1.要引用地方的json文件：

 

"usingComponents": {
    "select": "../../select/select"
  }

 

2.要引用地方的 wxml文件：

<select 
   id="SelectID"
   list="{{Array }}" 
   _width="100%" 
   _height="100%" 
   bind:action="handleChange" 
   actualvalue="id" 
   showvalue="name">
</select>
（注：Array换成自己的集合）