EDITORIAL
Before writing an article MultiPicker - "mobile terminal born" custom multi-level interaction selectors , get a lot of attention. Since many people are very curious about this process of hand-written plug-ins, so I write a few articles for the growth history of it ~
Before reading this article, make sure you have a little read MultiPicker source Oh ~
Click to view the source code can be in npm find them on:
Recalling upper Part: how to make a mobile terminal of a selector linkage (a)
Review the Part: how to make a mobile terminal of a selector linkage (b)
Review Part: how to make a mobile terminal of a selector linkage (III)
Six, custom interlock algorithm selector JSON
Thinking of eight question: "How to determine the next level of linkage series it? "
Due to the foregoing specification custom JSON format, therefore, if a linkage stages problem determination, translate to the [child at a depth of how to calculate} problem.
My solution is: iterative calls checkArrDeepto, you can determine whether there are sub-linkage to calculate depth.
Specific steps are as follows:
① first pass a need to calculate the depth of an object to checkArrDeep , to determine if there is child of the iteration, and compute depth.
② generate all sub-linkage corresponding Li, and updates dom, while the handle linkage translate3d are set to (0, 0, 0);
This step and the date picker essentially different, where sub linkage will be updated and all the sub-linkage will translate3d (0, 0, 0);
PS: Here's a little trick is sure to record before updating the linkage of a linked series. I used
ulCountto record on a linked series, after the completion of all the updates, and finally更新ulCount, for the next iteration.③ If you increase the linkage series (ulCount need to judge), was newly added linkage ul bind the new touch event. If the reduction linkage series, clear dom.
④ width reset linkage, the linkage is calculated and updated simultaneously use all the data, including ulCount:
Seven, the user can customize the callback
Consideration 9 question: "How to determine what data format the user wants it? "
The most perfect solution is to allow users to write their own callback, your own to solve all the problems of data formats.
Users can callback stitching they want a string or json format structure of the background you want . Largely increased flexibility.
So far, the "date picker - DateSelector" and "custom json selector - MulitiPicker" even completed.
Click Start to understand MultiPicker - custom multi-level interaction selector
Predict something
Github address: "To end mobile born" custom multi-level interaction selector
This, the history of the growth of selectors came to an end ~ ~ Thank you for watching
I'm Garbo Appian, a home to sell eruption algorithm sister paper.