AlloyTouch Endlosschleifen-Auswahl-Plug-in

Schreiben Sie vorne

Wenn es viele scrollende Inhalte gibt, wie zum Beispiel das Einstellen von Sekunden in einem Wecker, gibt es insgesamt 60 Elemente. Es ist für Benutzer sehr schmerzhaft, von 59 ms auf 01 ms zurückzuscrollen, also:
Wenn zu viele Listenelemente vorhanden sind, hoffen wir, dass es zu einer Endlosschleife beim Scrollen kommt. 00ms und 01ms sind nahtlos miteinander verbunden. Wie unten gezeigt:

auf die abhängigen JS- und CSS-Dateien zu verweisen.

<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>

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();

• Optionen ist die Menge von allem Artikel . Die oben simulierten 60 Elemente stellen die entsprechenden ms dar.

• selectedIndex ist der

  Index des anfänglich ausgewählten Elements

• Änderung geänderter Rückruf

• Abschließen ist der Rückruf, wenn Sie auf die Schaltfläche „Abschließen“

  klicken

-Attribut im 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;}

Verwenden Sie die Korrektur, um den Effekt von Schlagzyklen zu erzielen. (Hinweis: Obwohl der Wert um einen Zyklus springt, kann die DOM-Rendering-Leistung den Sprung nicht erkennen.)
wobei das Ziel ein
-Objekt ist, ein Literal ist, das das y-Attribut enthält, und scroll das Scrollen des Objekts ist wurde mit den zugehörigen Eigenschaften von transfrom gemischt, sodass seine vertikale Verschiebung direkt über scroll.translateY festgelegt werden kann.

Zusammenfassung

Wir stellen Ihnen im Folgenden auch Folgendes vor:

• AlloyTouch-Praxis zur Auswahl mehrerer Kaskaden

• AlloyTouch ermöglicht die Auswahl von 3D-Effekten

Das obige ist der detaillierte Inhalt vonAlloyTouch Endlosschleifen-Auswahl-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!