如何造一个移动端的联动选择器（一）

写在前面

以前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，获得了不少人的关注。鉴于不少人对这种手写插件的过程很好奇，因此写了几篇文章，来讲说它的成长史~

在阅读本文以前，确保你有稍微看过 MultiPicker 的源码 喔~

点击查看源码 ，也能够在 npm 上找到他们：

• 日期选择器 - DateSelector - NPM.

• 自定义json选择器 - MultiPicker. NPM.

1、 确认需求 & 构造函数的参数设计

想作自定义多级联动插件的最主要缘由，固然仍是由于在开发过程当中频繁的遇到。
而且对多级联动的产品需求又是奇葩到不行，市面上的插件都知足不了咱们产品的需求。因此，我不得不动手本身造。

在造轮子以前，先思考一个问题：

第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，一个卖萌出家的算法妹纸。