小程序下拉select通用组件

自己码了一个小程序的下拉组件，后续继续优化通用性

最终效果：

 

代码（每段代码最上部标注了文件类型）：

<!--components/s-select/index.wxml-->
<view class="select-box">
  <view class="select-current" catchtap="openClose">
    <input class="current-name" placeholder="请选择客户" name="{{showFieldName}}" value="{{showFieldVal}}" data-id="{{keyFieldVal}}"/>
    <input class="key-input" name="{{keyFieldName}}" value="{{keyFieldVal}}"/>
  </view>
  <view class="option-list" wx:if="{{isShow}}">
    <view wx:for="{{result}}" wx:key="id">
      <text class="option"  data-id="{{item.id}}" data-value="{{item.name}}" bindtap="clickSelect">{{item.name}}</text>
    </view>
  </view>
</view>

/* components/s-select/index.wxss */
.select-box {
  position: relative;
  width: 300rpx;
  font-size: 30rpx;
}

.select-current {
  position: relative;
  width: 300rpx;
  padding: 0 10rpx;
  line-height: 70rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 30rpx;
  content: '';
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.current-name {
  display: block;
  width: 85%;
  height: 70rpx;
  word-wrap: normal;
  overflow: hidden;
}

.option-list {
  position: absolute;
  left: 0;
  top: 76rpx;
  width: 100%;
  padding: 12rpx 20rpx 10rpx 20rpx;
  border-radius: 6rpx;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rcurrent-namegba(0, 0, 0, 0.2) inset;
  background-color: #fff;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  border-bottom: 1rpx solid #dadada;
}

.option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.key-input{
  display: none;
}

// components/s-select/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    options: Array,
    showFieldName: "company_name",
    keyFieldName: "company_code"
  },
  /**
   * 声明调用的form表单可以感知到input内容
   */
  behaviors: ['wx://form-field-group'],
  /**
   * 组件的初始数据
   */
  data: {
    result: Array,
    keyFieldVal: "",
    showFieldVal: "",
    isShow: false
  },

  /**
   * 组件的方法列表
   */
  methods: {

    clickSelect: function(e){
      console.log(e);
      this.setData({
        keyFieldVal: e.currentTarget.dataset.id,
        showFieldVal: e.currentTarget.dataset.value,
        isShow: false
      });
    },

    openClose: function(){
      this.setData({
        isShow: !this.data.isShow
      })
    },


    close() {
      this.setData({
        isShow: false
      })
    }
  },
  lifetimes: {
    attached() {
      var pp = new Array();
      for(let item of this.data.options){
        var ob = {};
        for(var colum in item){
          if(colum === this.data.keyFieldName){
            ob.id=item[colum];
          }else if(colum === this.data.showFieldName){
            ob.name=item[colum];
          }
        }
        pp.push(ob);
      };
      this.setData({
        result: pp
      })
    }
  }
  
})

调用：

//  pages/home/home.js

 data: {
    options: [
      {
        companyCode: "1221002",
        companyName: "南京企业"
      },
      {
        companyCode: "1221011",
        companyName: "海尔空调"
      },
      {
        companyCode: "1221012",
        companyName: "京东企业"
      }
    ],
    showFieldName: "companyName",
    keyFieldName: "companyCode"
  }

<!--page/home/home.wxml-->
<s-select options="{{options}}" showFieldName="companyName" keyFieldName="companyCode"></s-select>

本文基于已有的博客内容修改的符合个人理解一些

参考：https://www.cnblogs.com/similar/p/11469091.html