如何造一个移动端的联动选择器(一)

写在前面

之前写了一篇 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,一个卖萌出家的算法妹纸。

阅读 3.1k

推荐阅读
裂变科研中心
用户专栏

裂变科研中心是一个致力于开源的线上自由组织。我们一直保持着对高效、创新、开源的追求。希望能给大家...

238 人关注
40 篇文章
专栏主页