AlloyTouch infinite loop select plug-in

Write in front

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

Online demonstration

##http://www.php.cn/

When using the plug-in,

first

reference the JS and CSS files that depends on.

<link rel="stylesheet" href="select.css" /><script src="../../transformjs/transform.js"></script><script src="../../alloy_touch.js"></script><script src="alloy_touch.select.infinite.js"></script>

Then:

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", "<br/>选了第" + index + "项<br/>value:" + item.value + "<br/>text:" + item.text);
    }})iselect.show();

• options is the set of all items. The above simulates 60 items representing the corresponding ms

• selectedIndex is the

  index of the initial selected item

• change is changed Callback

• complete is the callback for clicking the completion

  button

Core Principle

Before looking at the principle , let’s take a 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;}

You can see that when initializing the AlloyTouch instance, the min and max parameters no longer exist because there is no need for rebound.

Use correction to produce the effect of beating cycles. (Note: Although the value will jump by one cycle, the dom rendering performance cannot see the jump)
where target is a
object containing the y attribute Literal, scroll is scrolling The object has been mixed with transfrom-related properties, so its vertical displacement can be set directly through scroll.translateY.

Summary

Because the rotation 360 does not automatically handle the cycle, we pass the motion object literal {y:xx} ourselves, and then map it to the scroll object's translateY through correction to control periodicity.

The follow-up will also bring you:

• AlloyTouch multiple cascade select actual combat

• AlloyTouch achieves 3D effect select actual combat

The above is the detailed content of AlloyTouch infinite loop select plug-in. For more information, please follow other related articles on the PHP Chinese website!