@gulibs/wx-select

@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();
    }
})