在写MultiPicker之前写了一篇文章——“为移动端而生”的自定义多级联动选择器,受到了很多人的关注。鉴于很多人都很好奇这个手写插件的流程,所以特地写了几篇文章来说说它的成长史~看这篇文章之前,请确保你已经阅读了MultiPicker的源码~点击查看源码,也可以在npm上找到它们:DateSelector-DateSelector-NPM。自定义json选择器-MultiPicker。NPM。1.确认构造函数的需求&参数设计想做自定义多级联动插件的主要原因当然是因为在开发中经常遇到。而且多级联动产品的需求千奇百怪,市面上的插件都不能满足我们产品的需求。所以,我不得不亲自动手,自己动手做。在造轮子之前先想一个问题:第一个问题:“你见过什么样的多级联动选择器?”'例如日期选择器、区域选择器、常见问题解答选择器或过滤条件选择器。我发现日期选择器与其他选择器有着根本的不同。日期选择器可以通过系统函数计算,其他选择器统称为需要自定义json的选择器。所以我开始构建这两个选择器:“DateSelector-DateSelector”和“CustomjsonSelector-MultiPicker”。思考第二个问题:“如何灵活高效地设置参数?”』1.我发现使用“日期选择器”有两个很急很棘手的要求:①:需要安排[年]、[月]、[日]、[时]、[分]五个时间单位并合并;②:时间范围需要精确到分钟。比如有一款特价商品,需要限定时间选择范围为【11月11日-11:11】,结束时间为【12月12日-12:12】。设置参数时,可以用一个数组来表示时间点,数组的每一位对应一个时间单位。而且,考虑到很多用户只需要一些时间单位的用户体验,需要一个参数来确定用户需要哪些时间单位,避免他们设置多余的时间单位带来的麻烦。参数字符类型取值说明param{Array}eg:[1,1,0,0,0]设置单位,元素对应['年','月','日','时','分'],必填1,不填0,连续1。比如只需要[月、日、时、分]四个单位,可以这样设置beginTime:参数字符类型值描述param{Array}eg:[0,1,1,1,1]来设置单位,元素对应['年','月','日','时','分'],1为必填,0为必填,为必填连续1beginTime{Array}eg:[3,27,12,12]设置开始时间点为3月27日12:12,空数组默认设置为1970年1月1日0:00开始,数组的值对应于param参数的对应值。结束时间endTime和recentTime也是如此。2、我发现使用“自定义json选择器”有一个很急很棘手的需求:①:用户在自定义JSON时期望不同层次的联动。比如区域选择器中可能有【北京→朝阳】这样的二级联动,也可能有【广东→深圳→福田区】这样的三级联动。因此需要设计一个JSON格式规范,既可以让用户更方便的表达自己想要的JSON,又可以让插件顺利读取JSON深度,动态适配联动。经过思考,我认为最简洁的JSON格式是一个对象数组,每个对象有如下属性:属性字符类型描述id{String}本层联动值的唯一标识{String}这个显示的内容leveloflinkagechild{Array}该级联动是否需要子联动,如果需要,继续传入数组,如果不需要子联动,则不需要设置child属性。其中child属性可以一直往下迭代,不需要同级联动的每个对象都需要有相同的子联动。Github地址:《为移动端而生》自定义多级联动选择器至此,需求已经明确。预示会发生什么,过两天再见。我是加宝阿皮安,一个可爱的算法少女出家了。
