(小程序 picker) 微信小程序选择器组件picker简单入门微信小程序Picker选择器基本用法全网首发(图文详解1)

微信小程序选择器组件picker是小程序内置的一个组件，用于显示与收集用户的选择，它可以实现如日期、时间、单项选择、多项选择等功能。

一、微信小程序中，picker组件的使用方式如下：

引入picker组件：在对应的wxml文件中，需要将picker组件引入进来。
通过在wxml文件中编写picker标签方式引入，代码如下：
```
...
```
配置picker组件的属性：picker组件有多个属性来实现各种功能，比如mode表示选择器类型，可以设置为selector(普通选择器)、multiSelector(多列选择器)为日期 pickerView、time(时间选择器)、date(日期选择器)等。
例如用picker组件实现一个日期选择器，代码如下：
```
当前选择：{{date}}
```
在对应的js文件中要写入如下代码：
```
Page({
 data: {
   date: '2016-09-01'
 }
})
```
在上述代码中，我们设置了picker的mode属性为date，这就使picker变成了一个日期选择器。
响应picker组件的选择事件：通过为picker组件添加bindchange事件处理函数，我们可以在用户选择后获得用户的选择。
如下是一个完整的示例代码：
```
//index.wxml
当前选择：{{index}}

//index.js
Page({
 data: {
   array: ['美国', '中国', '巴西', '日本'],
   index: 0
 },
 bindPickerChange: function(e) {
   console.log('picker发生change事件，携带值为', e.detail.value)
   this.setData({
     index: e.detail.value
   })
 }
})
```
在这个例子中，我们为picker添加了bindchange事件处理函数bindPickerChange，在用户选择后，bindPickerChange会被调用，并且事件对象会包含用户的选择。