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

前言
滚动选择器picker
- 普通选择器
- 多列选择器
- 时间选择器
- 日期选择器
- 省市区选择器

前言

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

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

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

主要涉及了三个部分：

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

分别用三篇博客来讲述。今天讲的是滚动选择器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界面准备的数据（放在data中），以及bindchange所绑定的事件

Page({data: {array: ['美国', '中国', '巴西', '日本'],objectArray: [{id: 0,name: '美国'},{id: 1,name: '中国'},{id: 2,name: '巴西'},{id: 3,name: '日本'}],index: 0},bindPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})}
})

注：这是微信开放文档的示例代码，在刚刚给的网址中可以找到，下面的示范就不复制粘贴了。

多列选择器

多列选择器即有多个列的选项可以选择

依旧来看一下多列选择器可以配置的属性

前面四个属性和普通选择器没有区别。
bindcolumnchange：所选择的列的值发生改变时触发的事件

注：与bindchange不同的是，bindchange是点击 “确定” 后才会触发。而bindcolumnchange是只要列的值一发生变化就触发。

例如，将第一列滑到 “脊柱动物” 后就会立刻触发bindcolumnchange所绑定的事件，再将它滑回 “无脊柱动物” 又会触发一次。但是只要不点击 “确定” ，bindchange是不会触发的。

多项选择器虽然只多了一个属性，但是比单项选择器复杂得多，主要是因为多项选择器中，前后列可能存在着关联，需要随时变化。

我们先来看前后列没关系的例子。

对于第一列来说，每一级都会对应 [‘上学期’,‘下学期’] 和 [‘1班’,‘2班’,‘3班’]。也就是说，每一列值发生变化不影响其他列的值。因此数据是不需要变化的，初始设置好就行了。

 classArray: [['2016级','2017级','2018级','2019级'],['上学期','下学期'],['1班','2班','3班']],classIndex: [0,0,0]

下面来看一下前后列有关系的例子，也就是官方文档中给出的例子

在这个例子中，第一列的选项发生变化后，第二、第三列的选项也要发生变化，第二列的选项发生变化后，第三列的选项也要发生变化。这就是一个三级级联的选择器。

要实现这个功能，关键就是在bindcolumnchange事件被调用的时候，对相应数组的值进行修改。

首先，第一列提供的选项是 [‘无脊柱动物’, ‘脊柱动物’] , 因为第一列默认先选择的是 ‘无脊柱动物’ ，因此第二列要提供的选项是 [‘扁形动物’, ‘线形动物’, ‘环节动物’, ‘软体动物’, ‘节肢动物’] 。因为第二列默认先选择的是 ’ 扁形动物’ ，因此第三列要提供的选项是 [‘猪肉绦虫’, ‘吸血虫’] 。这就组成了初始的数据数组。

multiArray: [['无脊柱动物', '脊柱动物'], ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]

现在，假设用户将第二列的选项滑动到 ‘环节动物’，那么第三列的数据就应该改为 [‘蚂蚁’, ‘蚂蟥’]。修改后的数组如下。

multiArray: [['无脊柱动物', '脊柱动物'], ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['蚂蚁', '蚂蟥']]

现在，假设用户将第一列的选项滑到 ‘脊柱动物’，那么第二列的数据就应该改为 [‘鱼’, ‘两栖动物’, ‘爬行动物’]。因为此时第二列默认会选择的是 ‘鱼’ ，因此第三列要提供的选项是 [‘鲫鱼’, ‘带鱼’] 。修改后的数组如下。

multiArray: [['无脊柱动物', '脊柱动物'], ['鱼', '两栖动物', '爬行动物'], ['鲫鱼', '带鱼']]

现在，假设用户将第二列的选项滑动到 ‘两栖动物’，那么第三列的数据就应该改为 [‘青蛙’, ‘娃娃鱼’]。修改后的数组如下。

multiArray: [['无脊柱动物', '脊柱动物'], ['鱼', '两栖动物', '爬行动物'], ['青蛙', '娃娃鱼']]

也就是说，第二列的选项变化的时候，要修改第三列的数组数据。第一列选项变化的时候，要修改第二列的数组数据，又因为第二列的选项也被改变了，同时也要修改第三列的数组数据。那么怎么在bindcolumnchange事件中实现呢？

在这个事件中，可以得到被修改的列(e.detail.column)，和修改后的值(e.detail.value)

console.log('修改的列为', e.detail.column, '，值为', e.detail.value);

首先判断被修改的列，假如是第一列的话，multiArray其实只有两种情况：

第一列选择无脊柱动物，根据无脊柱动物配置第二列；第二列默认选择扁形动物，根据扁形动物配置第三列
第一列选择脊柱动物，根据脊柱动物配置第二列；第二列默认选择鱼，根据鱼配置第三列

//第一个选项
multiArray: [['无脊柱动物', '脊柱动物'], ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]
//第二个选项
multiArray: [['无脊柱动物', '脊柱动物'], ['鱼', '两栖动物', '爬行动物'], ['鲫鱼', '带鱼']]

代码：

    //先判断修改的列switch (e.detail.column){//第一列case 0://再判断修改后的值switch (e.detail.value){case 0:data.multiArray = [['无脊柱动物', '脊柱动物'], ['扁形动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']];break;case 1:data.multiArray = [['无脊柱动物', '脊柱动物'], ['鱼', '两栖动物', '爬行动物'], ['鲫鱼', '带鱼']];break;}break;}

假如是第二列，因为不知道这时候选中的第一列是哪一个选项（每一个选项对应的第二列的数据不同），我们只知道第二列的值被修改了。例如从第二个选项滑到了第一个选项，但是无法确定第一个选项到底是 ‘扁形动物’ 还是 ‘鱼’ 。

因此首先要判断第一列的选项值，再判断第二列修改后的值，才能修改第三列的数据。

       //第二列case 1://先判断第一列是哪个选项switch (data.multiIndex[0]){//第一个选项case 0://判断修改后的值switch (e.detail.value){//修改第三列的数据case 0:data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[2] = ['蛔虫'];break;case 2:data.multiArray[2] = ['蚂蚁', '蚂蟥'];break;case 3:data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];break;case 4:data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];break;}break;//第二个选项case 1://判断修改后的值switch (e.detail.value){//修改第三列的数据case 0:data.multiArray[2] = ['鲫鱼', '带鱼'];break;case 1:data.multiArray[2] = ['青蛙', '娃娃鱼'];break;case 2:data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];break;}break;}break;

时间选择器

属性：

value：当前所选中的时间，格式是"hh:mm"。
start：有效时间范围的开始，格式是"hh:mm"。

注：这个“有效时间范围”，指的是用户可以选择的时间范围。但是在提供的选项上并不只在这个范围内。例如，设置有效时间范围的开始为"06:00"，选项上仍然会有"05:00",“04:00”…"00:00"可以选，只是选中之后又会滚回“06:00”而已。
end：有效时间范围的结束，格式是“hh:mm”。同上。
bindchange： value值改变后触发的事件，就是用户滑到其他选项并点击 “确定” 后所触发的事件。

日期选择器

属性：

其他部分和时间选择器差别不大，主要讲一下fields属性。

fields：表示选择器的粒度。这个 “粒度” 指的就是所提供选项的精细程度。也就是说，假如设置的是 “year” ，那么就只有年份可以选，假如设置的是 “month”，就有年份和月份可以选，假如设置的是 “day”，就有年月日可以选。

省市区选择器

微信小程序内置的省市区选择器，不需要自己准备数据，直接调用即可（可以设置初值）。

属性：

value：表示选中的省市区，格式为 [‘xx省’, ‘xx市’, ‘xx区’]。
custom-item：可以为每一列的顶部添加一个自定义的选项。

注：只能添加一项。如果连续设置，只显示最后的设置
```
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="全部" custom-item="其他">
```
bindchange：value值改变后发生的事件。通过event.detail.value可以获取到改变后的省市区的值

注：虽然文档中还写了可以用code读取到统计用区划代码，posecode读取到邮政编码，但是实际输出的时候不知道为啥读取不到。

微信内置的省市区选择器虽然设置起来很方便，但是官方没有公开具体的省市区数据，在实际的项目中只能读取到用户所选择的省市区而已，功能不是很完善。如果有需要，可以用多项选择器来自己制作一个。