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

tabalt 发布于2019-08-22 10:44 / 3302人阅读

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，需求已经明确。

写在前面

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

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

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

日期选择器 - DateSelector - NPM.

自定义json选择器 - 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，一个卖萌出家的算法妹纸。

云服务器 GPU云服务器如何选择一个好域名关于适配移动端的移动端的html js 移动端的表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91174.html

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

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说...

ssshooter 2019-08-30 13:12 评论0 收藏0
如何造一个移动端的联动选择器（四）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说...

cgspine 2019-08-22 10:46 评论0 收藏0
如何造一个移动端的联动选择器（四）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说...

leiyi 2019-08-01 16:03 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

ls0609 2019-08-02 15:56 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

zzzmh 2019-08-30 13:11 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

since1986 2019-08-22 10:46 评论0 收藏0