2.3 选择器picker

我们要学习的第二个普通组件是“选择器”。当然，你可能更熟悉它的另一个名字：下拉列表。

要了解picker组件的使用方法，请访问右侧二维码。

Hello World项目

要使用picker组件，我们需要准备一些选项供picker组件显示给用户：

// index.js
data: {
  inputValue: "",
  pickerItemArray: ['Item 0', 'Item 1', 'Item 2'],

我们还需要准备一个变量来记录用户选择的选项：

pickerItemArray: ['Item 0', 'Item 1', 'Item 2'],
pickerIndex: 0,

有了pickerItemArray和pickerIndex，我们就可以显示出一个选择器了：

<!-- index.wxml -->
<picker range="{{ pickerItemArray }}"
  value="{{ pickerIndex }}">
    <view>
      {{ pickerItemArray[pickerIndex] }}
    </view>
</picker>

picker 组件中的 view 组件决定了显示的内容。由于 pickerIndex 的默认值为0，同时pickerItemArray的第0项为“Item 0”，因此会显示出“Item 0”，如图2-8所示。

单击“Item 0”后，会弹出选择器，如图2-9所示。

图2-8 选择器的显示效果

图2-9 单击“Item 0”后的显示效果

现在的问题是，无论我们选择了选择器中的哪一项，picker组件始终会显示“Item 0”。这是由于 picker 组件显示的内容是由 picker 组件中的 view 组件决定的，而 view 组件显示的内容是pickerItemArray[pickerIndex]。在用户选择了其他选项之后，pickerIndex的值并没有发生变化。因此，picker组件依然会显示“Item 0”。

为了让picker组件显示出用户选择的选项，需要先获得用户选择的选项，再修改pickerIndex变量的值。为此，我们首先设置picker组件的bindchange属性，将它关联到一个函数：

<picker range="{{ pickerItemArray }}"
  value="{{ pickerIndex }}" bindchange="pickerBindChange">
    ...

与我们获得input组件的内容的方法类似，我们也通过pickerBindChange函数的参数获得了用户选择的选项的索引：

// index.js
pickerBindChange: function (e) {
  console.log(e.detail.value);
  this.setData({
    pickerIndex: e.detail.value
  });
},

在上面的代码中，我们将用户选择的选项的索引输出，并将索引值设置给pickerIndex变量。这样一来，我们就知道用户选择了哪一个选项，并且可以将用户选择的选项显示在 picker组件中了。

我们能否通过双向数据绑定来获得用户选择的选项？请在“动手做”环节中测试一下吧！ aPp1+VS6Z2/bi8MbJZ+x3t4Z7XCemDEXdMD4dGVyCVSntKjr6F7APIeGfWKhziD6