背景 项目需求要实现类似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
