微信小程序自定义yPicker组件实现省市区三级联动功能-木庄网络博客

本文整理自网络，侵删。

自从上一篇文章：微信小程序自定义日历组件及flex布局最后一行对齐问题分析出来以后，有人私聊我说能不能从头分析一下我开源的自定义组件？一直没时间。这不，最近项目中有个需求是 省市区三级联动 ，我就顺便从组件库中的第一个「扩展日期-时间picker（点此直接至GitHub，欢迎star）」组件开始说一下这两个功能的实现。

简单说一下“自定义日期-时间组件”

它的背景是项目的第一版当时发现微信小程序内置的日期组件：picker只能精确到某一天（年月日），但是我们很多时候需要年月日时分甚至是年月日时分秒（如结束时间/发布时间）。

笔者仔细翻阅了官方文档和许多博主文章发现提出了各种各样的解决方案（但很遗憾没发现有博主详细公开代码），但是对于这样一个其实并不需要“联动”、列数也不固定的功能，用多列picker模拟多列选择器 即可。

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
	<input value='{{time}}' readonly="" disabled="true" placeholder='{{defaulttext}}' />
</picker>

其中 readonly="" disabled="true" 的作用是使“input聚焦时软键盘不弹出”（两个属性作用一样，都写是因为Android和iOS的兼容性问题）。

用input代替view是因为input的placeholder方便实现“无选中时默认提示”的效果。

主要实现策略

如上所示，监听了两个事件，分别是：日期选择窗口弹出时以及点击“确定”按钮时触发函数change、多列选择器中每一列滑动时触发事件columnchange。

change中很简单：只需要把选中的数据暴露给页面中（或者通过 triggerEvent 返回给调用页面）即可；
columnchange中要做的就是当前选中的每一列的值填充到data中对应数组的某一项。比如：e.detail.column==1 时表示当前滑动的是第二列（月份），此时需要判断的是每一月有几天：

if (e.detail.column == 1) {
 let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
 let temp = [];
 if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
 for (let i = 1; i <= 31; i++) {
  if (i < 10) {
  i = "0" + i;
  }
  temp.push("" + i);
 }
 this.setData({
  ['multiArray[2]']: temp //第三列天数更新（根据月份）
 });
 }
}

注意： 多列picker组件监听两个参数：multiArray和multiIndex，他们都是数组！
multiArray主要用来表示监听几列，其元素都是一个个数组，如：[years, months, days, hours, minutes]
multiIndex是当前每一列（点开时的）初始值！如：[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
一般来说，multiIndex中的值也被用来当做取multiArray中元素时的第二个索引！

说说省市区三级联动实现

先将城市列表文件发出来：（永久免费下载）

链接: https://pan.baidu.com/s/1tPabuqSY6SfBNfOEMkjPVA

提取码: wc3g

使用时按如下引入即可：（是一个citysearch.js文件）

import placeArrays from 'citysearch文件路径';
const placeArray=placeArrays.placeArray

正式开始

不知大家有没有使用过，或听过小程序的 picker-view 组件，其定位就是：嵌入页面的滚动选择器。
它有三个参数：

参数	类型	说明
value	Number Array	数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
bindchange	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value} value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）