Heim > Artikel > Web-Frontend > AlloyTouch Endlosschleifen-Auswahl-Plug-in
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:
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();
-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;}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.
Wir stellen Ihnen im Folgenden auch Folgendes vor:
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!