自定义微信小程序下拉选择组件Select

背景
项目需求要实现类似html标签 <Select/>效果，所以写了一个类型效果的自定义组件。

效果图

wxml

<view class="view-body">
  <text class='item-key'>{{title}}<text style="color:red" wx:if="{{isRequired}}">*</text></text>
  <view class="view-select-container">
    <view class='select-value' bindtap="selectToggle">
      <input value="{{value}}" name='{{name}}' disabled="{{true}}" />
      <image class='img-arrow' style="width:40rpx;height:40rpx" src='/images/drop_down.png' />
    </view>
    <view class="view-options" wx:if="{{showOptions}}">
      <cover-view class='option-item' wx:for="{{options}}" data-index="{{index}}" bindtap="selectItem">{{item[showkey]}}</cover-view>
    </view>
  </view>
</view>

 js

Component({
  behaviors: ['wx://form-field'], //支持表单获取组件值
  properties: {
    //组件的名称
    title: {
      type: String
    },
    //通过form获取组件的值
    name: {
      type: String
    },
    //下拉显示的数据集合
    options: {
      type: Array
    },
    //表单组件是否必填
    isRequired: {
      type: Boolean
    },
    //外部传递的动态变量
    showkey: {
      type: String
    }
  },
  data: {
    showOptions: false //组件默认的展开状态
  },
  /**
   * 组件的方法列表
   */
  lifetimes: {
    attached: function() {
      var key = this.properties.showkey
      this.setData({
        value: this.properties.options[0][key] //默认选中第一个
      })
    },
  },
  methods: {
    selectToggle: function(e) {
      this.setData({
        showOptions: !this.data.showOptions
      })
    },
    selectItem: function(e) {
      var optionList = this.properties.options //外部传进来的数组对象
      var nowIdx = e.currentTarget.dataset.index //当前点击的索引
      var selectItem = optionList[nowIdx] //当前点击的内容
      this.setData({
        showOptions: false,
        value: selectItem[this.properties.showkey]
      });
      var eventOption = {} // 触发事件的选项
      this.triggerEvent("mySelectItem", selectItem) //组件选中回调
    }
  }
})

使用

json中引入自定义组件

{
  "usingComponents": {
    "Select": "/components/select/select"
  }
}

js

Page({
  data: {
    optionArry: [{
      "name": "香蕉",
      "id": "1"
    }, {
      "name": "苹果",
      "id": "2"
    }, {
      "name": "橘子",
      "id": "3"
    }, {
      "name": "雪梨",
      "id": "4"
    }],
  },
  onLoad: function() {},
})

wxml中使用

<Select title="类别" options="{{optionArry}}" isRequired="true" bind:mySelectItem='onSelectItem' name='formkey' showkey='name' />

 

总结：可以动态传递对象数组在组件中显示的属性名，类型picker的range-key;主要遇到的问题就是组件展开时遮住原生组件时的点击击穿问题，所以这里使用了 cover-view 来解决这一问题。

最后完整源码地址为：

https://github.com/tex-github/miniprogram-components-select.git