AlloyTouch infinite loop select plug-in

When there is a lot of scrolling content, such as setting seconds in the alarm, there are a total of 60 items. It is very painful for users to roll back from 59ms to 01ms. Therefore, when there are too many items in the list, we hope to have an infinite loop of scrolling. Ms and Ms are seamlessly linked. As shown in: Preface

When there is a lot of scrolling content, such as setting seconds in the alarm, there are a total of 60 items. It is very painful for the user to roll back from 59ms to 01ms, so:
When there are too many items in the list, we hope to have an infinite loop of scrolling. Ms and Ms are seamlessly linked. As shown in:

Var I = 0, options = []; for (; I <60; I ++) {options. push ({value: I, text: I <10? "0" + I + "ms": I + "ms"});} var iselect = new AlloyTouch. select ({options: options, selectedIndex: 11, change: function (item, index) {}, complete: function (item, index) {document. body. insertAdjacentHTML ("beforeEnd ","
Select "+ index +"
Value: "+ item. value +"
Text: "+ item. text) ;}}) iselect. show ();

• Options is a set of all items. The above 60 simulated items represent the corresponding ms

• SelectedIndex is the index of the initial selected item.

• Change is the callback of change.

• Complete is the callback of the click Finish button.

Core Principles

Before looking at the principle, let's look at the attribute changes in the dom.

new AlloyTouch({    touch: container,    target: { y: -1 * preSelectedIndex * step },    property: "y",    vertical: true,    step: step,    change: function (value) {        correction(value);    },    touchStart: function (evt, value) { },    touchMove: function (evt, value) { },    touchEnd: function (evt, value) { },    tap: function (evt, value) { },    pressMove: function (evt, value) { },    animationEnd: function (value) { }})function correction(value) {    value %= scrollerHeight;    if (Math.abs(value) > scrollerHeight-90) {        if (value > 0) {            value -= scrollerHeight;        } else {            value += scrollerHeight;        }    }    scroll.translateY = value - scrollerHeight;}

We can see that the min and max parameters do not exist when the AlloyTouch instance is initialized, because no rebound is required.
Use correction to produce the effect of a beat cycle. (Note: although the value will skip a cycle, the dom rendering performance cannot be seen)
Target is an object literal that contains the y attribute,
Scroll is a rolling object that has been blended with the relevant properties of transfrom. Therefore, you can directly set the displacement in the vertical direction through scroll. translateY.

Summary

Because it does not mean that the 360 rotation will automatically process the cycle, we will control the cycle by means of the literal volume of the moving object {y: xx}, and then ing to the translateY of the rolling object through correction.
We will also bring you the following:

• AlloyTouch multi-level Cascade select practice

• AlloyTouch implements select for 3D Effects

The above is the details of the AlloyTouch infinite loop select plug-in. For more information, see other related articles in the first PHP community!