写在前面
之前写了一篇 MultiPicker -『为挪动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这类手写插件的历程很猎奇,所以写了几篇文章,来讲说它的成长史~
在浏览本文之前,确保你有轻微看过 MultiPicker 的源码 喔~
点击检察源码 ,也能够在 npm 上找到他们:
回忆上上上集:怎样造一个挪动端的联动选择器(一)
回忆上上集:怎样造一个挪动端的联动选择器(二)
回忆上集: 怎样造一个挪动端的联动选择器(三)
六、自定义JSON选择器 的联动算法
思索第8个题目:『怎样肯定下一级的联动级数呢?』
因为前面范例了自定义JSON的花样,所以,假如推断下一级联动的级数题目,就转化成为了【怎样盘算下一级 child 的深度】题目。
我的处理方案是:迭代挪用 checkArrDeep
来,就可以推断是不是另有子联动,从而盘算深度。
详细完成步骤以下:
① 先传入一个须要盘算深度的对象给 checkArrDeep,推断假如另有child则迭代,并盘算深度。
② 天生一切子联动对应的 li,并更新dom,同时把子联动的 translate3d 都设置成 (0, 0, 0);
这步和 日期选择器 有着实质的差别,这里的子联动一定会更新,而且一切子联动一定会 translate3d(0 ,0 ,0);
PS: 这里有一个小技能,就是一定要记录在更新联动之前的上一次联动的级数。我用
ulCount
来记录上一次联动的级数,在完成一切更新操纵以后,末了更新ulCount
,以便下次迭代运用。③ 假如增添了联动级数(须要ulCount来推断),则为新增添的联动 ul 绑定新的touch事宜。假如减少了联动级数,则消灭dom。
④ 从新设置联动的宽度,并同步更新一切盘算联动会运用到的数据,包含ulCount:
七、用户能够自定义callback
思索第9个题目:『怎样肯定用户想要什么样的数据花样呢?』
最圆满的处理方案,就是让用户本身写callback,本身处理一切的数据花样题目。
用户能够在回调中 拼接本身想要的字符串 或 组织背景想要的json花样。很大程度上的增添了天真度。
至此, 『日期选择器 – DateSelector』 和 『自定义json选择器 – MulitiPicker』就算完成了。
点击最先相识 MultiPicker – 自定义多级联动选择器
预知后话
Github地点:『为挪动端而生』的自定义多级联动选择器
到此,这个选择器的成长史就完毕啦~ 多谢寓目~
我是嘉宝Appian,一个卖萌落发的算法妹纸。