微信小程序开发笔记（1.1）滚动选择器picker的使用

前言

最近被拉来做小程序，因为时间比较赶，其他方面只能放一放了。也没办法很系统地去学习，只能是以功能为导向，需要实现什么功能就去一步步学习做法，同时记录一下学习过程。

今天实现的是一个很简单的功能：对各省市历年分数线的查询，如图所示

这个功能其实很简单：用户选择相应的条件后，点击 “查询” ，然后将查询的结果展示出来即可。

主要涉及了三个部分：

1. 滚动选择器picker
2. 单项选择框radio
3. 对云端数据的读取与显示

分别用三篇博客来讲述。今天讲的是滚动选择器picker。

滚动选择器picker

先来看官方文档的描述。

网址：微信官方文档-picker

以上是picker的通用属性，没什么好说的，主要讲一下mode属性。

选择器一共有五种：

普通选择器

普通的选择器也就是我们要用的单列选择器，只有一列选项可以选择

如何配置这个普通选择器呢？除了picker的通用属性以外，不同的选择器也有不同的属性。

• range：你所提供的选项集合。它可以是一个数组，也可以是一个对象数组。

  

• value：当前选中的选项的下标

• bindchange：value值改变后触发的事件，就是用户滑到其他选项并点击 “确定” 后所触发的事件

• range-key：如果你提供的选项是只是一个数组，普通选择器自然显示的是数组中的内容。但是如果你提供的是对象数组(objectArray)，而你想展示的只是对象的某个属性(objectArray.name)，因此还需要设置range-key值来选择你想展示的属性。

  注：书写时 range = "{ { ‘属性字段’ }} "。要将属性字段加上单引号才有效。

在 js 界面准备好数据后，在wxml界面配置选择器，并进行数据绑定。

<view class="section">
  <!--range:array-->
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{
    {index}}" range="{
    {array}}">
    <view class="picker">
      当前选择：{
  {array[index]}}
    </view>
  </picker>
</view>
<!--range:objectArray-->
<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{
    {index}}" range="{
    {objectArray}}" range-key="{
    {
    'name'}}">
    <view class="picker">
      当前选择：{
  {objectArray[index].name}}
    </view>
  </picker>
</view>

js界面准备的数据࿰