写在前面
之前写了一篇 MultiPicker -『为挪动端而生』的自定义多级联动选择器，获得了许多人的关注。鉴于许多人对这类手写插件的历程很猎奇，所以写了几篇文章，来讲说它的成长史~
在浏览本文之前，确保你有轻微看过 MultiPicker 的源码 喔~
点击检察源码 ，也可以在 npm 上找到他们：
一、 确认需求 & 组织函数的参数设想
想做自定义多级联动插件的最主要缘由，固然照样由于在开辟历程当中频仍的碰到。
而且对多级联动的产物需求又是奇葩到不可，市面上的插件都满足不了我们产物的需求。所以，我不能不动手本身造。
在造轮子之前，先思索一个题目：
第1个题目：『你都见过如何的多级联动选择器？』
比方
日期选择器、区域选择器、FAQ选择器，或许挑选前提选择器。
我发明，日期选择器和其他选择器有着实质的差别。日期选择器可以经由过程体系函数盘算获得，而其他选择器可以统称为须要自定义json的选择器。
所以我最先动手打造这两个选择器：
『日期选择器 – DateSelector』 & 『自定义json选择器 – MulitiPicker』。
思索第2个题目：『参数要怎样天真和高效地设置？』
1.我发明，运用『日期选择器』有两个异常急切、刁钻的需求：
①：须要【年】【月】【日】【时】【分】这五种时刻单元举行排列组合；
②：须要时刻局限准确到分钟。比方，有一个特卖产物须要限定时刻可选局限为【11月11日 – 11:11】最先，并于【12月12日 – 12:12 】完毕。
在设置参数的时刻斟酌，可以运用一个数组来示意时刻点，数组的每一位都对应一个时刻单元。
而且，斟酌到许多只须要 部份时刻单元 的用户的用户体验，所以须要一个参数肯定用户须要哪些时刻单元，防止他们设置冗余时刻单元带来的贫苦。
| 参数 | 字符范例 | 取值 | 申明 |
|---|---|---|---|
| param | {Array} | eg:[1,1,0,0,0] | 设置单元，元素离别对应设置[‘year’,’month’,’day’,’hour’,’minute’],1为须要，0为不须要,须要为一连的1 |
比方，你只须要 【月日时分】这四个单元，你可以如许设置beginTime:
| 参数 | 字符范例 | 取值 | 申明 |
|---|---|---|---|
| param | {Array} | eg:[0, 1, 1, 1, 1] | 设置单元，元素离别对应设置[‘year’,’month’,’day’,’hour’,’minute’],1为须要，0为不须要,须要为一连的1 |
| beginTime | {Array} | eg:[3,27,12,12] 3月27日12点12分 | 设置最先时刻点,空数组默许设置成1970年1月1日0时0分最先，数组的值对应param参数的对应值。 |
完毕时刻 endTime 和 recentTime 也是同理。
2.我发明，运用『自定义json选择器』有一个异常急切、刁钻的需求：
①：用户在自定义JSON的时刻希冀可以存在差别级别的联动。
比方，区域选择器中可以同时存在【北京 → 旭日】如许的二级联动，也可以存在【广东 → 深圳 → 福田区】如许的三级联动。
所以要设想一种JSON的花样范例，既可以让用户更轻易的表达本身想要的JSON，又能让插件可以顺遂读到JSON深度，从而动态顺应联动。
经由斟酌，以为最爽利的JSON花样是对象数组，而且每一个对象的属性有以下几个：
| 属性 | 字符范例 | 申明 |
|---|---|---|
| id | {String} | 该级联动的唯一标识 |
| value | {String} | 该级联动显现的内容 |
| child | {Array} | 该级联动是不是须要子联动，如须要则继承传入数组，如不须要子联动，则不必设置child这个属性 |
个中，child属性可以一向向下迭代，并不请求统一级联动的各个对象要具有雷同的子联动。
预知后话
Github地点:『为挪动端而生』的自定义多级联动选择器
到此，需求已明白。
预知后话，后两天见分晓
我是嘉宝Appian，一个卖萌落发的算法妹纸。
