16 | 滚动选择器（一）：学习使用选择器组件-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 第十六章 滚动选择器（一）：学习使用选择器组件

在微信小程序的开发过程中，滚动选择器（Picker）是一个非常实用且常见的组件，它允许用户在一个有限的选项列表中滚动选择，常见于日期选择、时间选择、城市选择等场景。本章将深入探讨微信小程序中的选择器组件（picker），从基础使用到高级配置，帮助读者全面掌握这一重要组件。

#### 1. 选择器组件基础

微信小程序提供了`<picker>`组件作为滚动选择器的实现。该组件通过不同的`mode`属性来定义不同的选择器类型，如普通选择器、时间选择器、日期选择器、多列选择器等。在使用`<picker>`组件之前，首先需要了解其基本属性与方法。

##### 1.1 基本属性

- **mode**: 定义选择器的类型，可选值包括`selector`（普通选择器，文本选择）、`multiSelector`（多列选择器）、`time`（时间选择器）、`date`（日期选择器）、`region`（地区选择器，包括省市区三级联动）。
- **range**: 当`mode`为`selector`或`multiSelector`时，`range`是一个二维数组，表示选项列表，二维数组的每一项表示picker的一列。
- **value**: 表示当前选中项的值，可以是字符串或者字符串数组（对于`multiSelector`）。
- **start`: 表示初始时的选中位置，对于`date`和`time`模式有效。
- **end**: 表示结束时的选中位置，仅对`time`模式有效，用于定义时间选择器的结束时间范围。
- **fields**: 定义返回的日期字段，仅对`date`模式有效，如`"year,month,day"`。
- **bindchange**: 当选择器发生变化时触发的事件处理函数。

##### 1.2 基本用法示例

以下是一个简单的普通选择器（`mode="selector"`）示例：

```xml

<view class="container">
  <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange">
    <view class="picker">{{array[index]}}</view>
  </picker>
</view>
```

```javascript
// pages/picker/picker.js
Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    index: 0,
  },
  bindPickerChange: function(e) {
    this.setData({
      index: e.detail.value
    })
  }
})
```

在上面的例子中，我们定义了一个包含四个国家名称的`array`数组，并通过`range`属性将其传递给`<picker>`组件。`value`属性初始化为`0`，表示默认选中第一个选项（美国）。当用户改变选择时，`bindPickerChange`函数会被触发，并更新`index`的值以反映新的选择。

#### 2. 时间选择器与时间范围选择器

时间选择器（`mode="time"`）和时间范围选择器虽然微信官方文档中没有直接提供后者作为独立组件，但可以通过组合两个时间选择器来实现。

##### 2.1 时间选择器

时间选择器允许用户选择具体的时间点，通过`start`和`end`属性（后者仅对`time`模式有效且用于限制可选时间范围）来定义可选的时间范围。

```xml
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">{{time}}</view>
</picker>
```

在JavaScript中，需要维护一个表示当前选中时间的变量（如`time`），并在`bindTimeChange`函数中更新它。

##### 2.2 实现时间范围选择器

时间范围选择器可以通过两个时间选择器组件实现，分别用于选择开始时间和结束时间，并通过逻辑控制确保结束时间不早于开始时间。

```xml

<picker mode="time" value="{{startTime}}" start="00:00" end="23:59" bindchange="bindStartTimeChange">
  <view class="picker">开始时间: {{startTime}}</view>
</picker>

<picker mode="time" value="{{endTime}}" start="{{startTime}}" end="23:59" bindchange="bindEndTimeChange">
  <view class="picker">结束时间: {{endTime}}</view>
</picker>
```

在JavaScript中，需要确保`endTime`的`start`属性始终等于`startTime`的值，以保证逻辑正确性。

#### 3. 日期选择器

日期选择器（`mode="date"`）允许用户选择具体的日期。通过`fields`属性可以定义返回的日期字段（如年、月、日）。

```xml
<picker mode="date" value="{{date}}" fields="year,month,day" bindchange="bindDateChange">
  <view class="picker">选择日期: {{date}}</view>
</picker>
```

在`bindDateChange`函数中，可以获取到用户选择的日期，并根据需要进行处理。

#### 4. 地区选择器

地区选择器（`mode="region"`）提供了省市区三级联动的功能，非常适合用于地址信息的选择。

```xml
<picker mode="region" value="{{region}}" bindchange="bindRegionChange">
  <view class="picker">选择地区: {{region[0]}} {{region[1]}} {{region[2]}}</view>
</picker>
```

这里，`region`是一个包含三个元素的数组，分别表示省、市、区。用户选择后，`bindRegionChange`函数会被触发，并返回一个新的包含三个选中值的数组。

#### 5. 多列选择器

多列选择器（`mode="multiSelector"`）允许用户在一个二维数组定义的选项列表中，从每一列中选择一个选项。这在处理如商品规格选择等场景时非常有用。

```xml
<picker mode="multiSelector" range="{{multiArray}}" value="{{multiIndex}}" bindchange="bindMultiSelectorChange">
  <view class="picker">
    
    <block wx:for="{{multiIndex}}" wx:key="index">
      {{multiArray[index][item]}}
    </block>
  </view>
</picker>
```

在JavaScript中，需要维护`multiArray`（选项列表）和`multiIndex`（当前选中项的索引数组）。`bindMultiSelectorChange`函数用于处理用户的选择变化。

#### 6. 自定义样式与交互

虽然`<picker>`组件本身提供了一定程度的样式定制能力（如通过`class`属性），但在某些情况下，开发者可能需要对选择器进行更深入的自定义，如改变弹出层的样式、增加动画效果等。这时，可以考虑使用微信小程序的自定义组件功能，结合`<view>`、`<scroll-view>`等组件来模拟`<picker>`的行为。

#### 7. 小结

本章详细介绍了微信小程序中`<picker>`组件的基础用法、不同类型选择器的实现方式，以及如何通过自定义样式和交互来提升用户体验。通过学习和实践这些内容，读者将能够灵活运用选择器组件，为小程序添加丰富的交互功能。在接下来的章节中，我们将继续深入探讨滚动选择器的进阶应用，包括与其他组件的联动、动态生成选项列表等高级话题。

该分类下的相关小册推荐：

微信小程序与云开发(中)

微信小程序全栈开发实战(中)

微信小程序与云开发(下)

微信小程序与云开发(上)

微信小程序底层框架实现原理

微信小程序全栈开发实战(下)