怎样造一个挪动端的联动选择器(四)

写在前面

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

    原文作者:嘉宝Appian
    原文地址: https://segmentfault.com/a/1190000007662913
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞