@gulibs/wx-select组件

简单好用的微信小程序select组件

简介

因为找不到好用的select组件，所以自己写了一个

##属性

| 属性 | 类型 | 默认值 | 必填 | 说明 | |:-:|:-:|:-:|:-:|---| | options | array | [] | 是 | 数据源 | | show-duration | number | 200 | 否 | 显示选项时间 | | hide-duration | number | 200 | 否 | 隐藏选项时间 | | id-key | string | 'id'| 否 | 修改数据源哪个字段对应id字段 | | value-key | string | 'value'| 否 | 修改数据源那个字段对应vlaue字段 | | bind:change | eventhandle | | 否 | 用户选择时，会返回对应的选项数据e.detail |

使用

安装：

npm install @gulibs/wx-select

打开json文件，引入组件

{
  "usingComponents": {
    "select": "@gulibs/wx-select"
  }
}

wxml 使用组件

<view class="container" catchtap="close">
    <view class="select-wrap">
        <select id="select" options="{{options}}" id-key="city_id" value-key="city_name" bind:change="change" show-duration="350" hide-duration="350"></select>
    </view>
</view>

wxss 添加样式

page {
    height: 100%;
}

.select-wrap {
    width: 300rpx;
}

.selected {
    margin-top: 50%;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

4.示例代码

Page({
    data: {
        __comps__: {
            select: null
        },
        options: [{
            city_id: '001',
            city_name: '北京'
        }, {
            city_id: '002',
            city_name: '上海'
        }, {
            city_id: '003',
            city_name: '深圳'
        }],
    },
    onReady() {
        this.data.__comps__.select = this.selectComponent("#select");
    },
    change(e) {
        console.log("change", e.detail)
    },
    close() {
        this.data.__comps__.select.hide();
    }
})