小程序怎么制作三级联动选择器

在使用移动端产品时特定的应用会采用联动选择期，一来可以给用户好的使用体验，同时排除用户错误的输入方式。联动器有二级的，也有多级的，其中下级选择器会根据上级的不同而提供不同的选则，小程序开发中可以使用组件制作三级联动选择器。

借助picker组件可以很便捷的帮我们实现省市区、日期时间、多列选择器。微信官方的介绍中，picker组件能从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。通过实例创建一个地域数据的三级联动选择器便于理解：

交互

首先用户点击选择购车门店按钮，选择省级地区，然后通过选择的省级key充当查询条件获取市级数据，然后用选择市级后的key查询门店数据。

数据结构

后端的数据结构如下：

我们使用每条数据的value用来显示，使用key 来进行请求，最后获取到选择的门店key，然后进行保存即可。

WXML文件：

       请选择

       {{multiArray[2][multiIndex[2]]}}

1、mode=multiSelector用来声明创建的是多列选择器

2、value={{multiIndex}} multiIndex也是数组，用来表示选择的多维数组的每一项的第几个

3、picker组件用来创建一个从底部弹起的滚动选择器

4、bindchange是value改变触发的事件，bindcolumnchange每一列值改变时候触发的事件

5、range={{multiArray}} multiArray就是我们的多维数组，这次我们用来放置数据所有的名字

bindcolumnchange

bindcolumnchange用来绑定每一列值改变时候触发的事件。

columnchange(e){

   console.log(e.detail)   //{column: 2, value: 1}

    switch(e.detail.column)  { // 此时的改变列数

      case 0:

          // 处理逻辑

      break;

      case 1:

          //  处理逻辑

      break;

    }

    this.setData({

      // 更新数据

    })

}

column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标

bindchange

bindchange用来绑定value改变触发的事件。

pickchange(e){ // picker发送选择改变时候触发 通过e.detail.value获取携带的值 console.log(e.detail.value) //   [0,1,2]   this.setData({

      multiIndex:e.detail.value  // 直接更新即可

    })

}

逻辑

缕下思路，实现起来大体分为以下几步：

1、加载省级数据，处理后放置在multiArray里面，存储下原始数据并用第一个数据的key请求市级数据，拿到市级数据后做同样操作，门店同理。

2、编写columnchange和pickchange函数，用来处理选择器更改时候的操作。

3、页面加载后，调用获取省级数据的函数，这个函数自己会去拿市级和门店的数据。

使用picker组件实现多列选择器还是很简单的，我们只需要将处理逻辑放在高大威猛的bindcolumnchange里面就行了。可以将一些公用的函数封装在Util文件里面，如上面代码的ajax就是放在里面的。

推荐阅读：聊天室小程序制作了解session    微信小程序开发教程