Heim  >  Artikel  >  Web-Frontend  >  AlloyTouch Endlosschleifen-Auswahl-Plug-in

AlloyTouch Endlosschleifen-Auswahl-Plug-in

PHPz
PHPzOriginal
2017-03-12 16:01:061252Durchsuche

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:

AlloyTouch Endlosschleifen-Auswahl-Plug-in

Online-Demo

AlloyTouch Endlosschleifen-Auswahl-Plug-in

http://www.php.cn/

Das Plug-in verwendet

zunächst, um

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


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

Grundprinzip

Vorher Schauen wir uns das Prinzip an und werfen wir einen Blick auf die Änderungen im

-Attribut im Dom.

AlloyTouch Endlosschleifen-Auswahl-Plug-in


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;}
Sie können sehen, dass es beim Initialisieren der AlloyTouch-Instanz keine Min- und Max-Parameter gibt, da keine Notwendigkeit dafür besteht Rebound.

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

Da die Drehung um 360 den Zyklus nicht automatisch verarbeitet, übergeben wir das Bewegungsobjektliteral {y:xx} selbst und ordnen es dann dem Bildlaufobjekt zu Übersetzen Sie Y durch Korrektur, um die Periodizität zu steuern.

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn