JS implementiert einen benutzerdefinierten Bildlaufeffekt

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von JS zum Implementieren des benutzerdefinierten Bildlaufeffekts ein. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor Es kann folgen. Lernen wir gemeinsam mit dem Herausgeber. Ich hoffe, es hilft allen.

Vorwort

Als ich kürzlich ein Projekt im Unternehmen entwickelte, konnten einige Dinge in der nativen Bildlaufleiste nicht für eine feinere Steuerung angepasst werden. Deshalb habe ich einen Browser-Bildlaufmonitor entwickelt, der besser ähnelt. Lassen Sie uns bei der JS-Implementierung untersuchen, was berücksichtigt werden muss und wie der Prozess des benutzerdefinierten Scrollens abläuft. Es gibt nicht viel zu sagen, werfen wir einen Blick auf die ausführliche Einführung.

Bildlaufüberwachungsereignisse auswählen

Da es sich um ein benutzerdefiniertes Bildlaufereignis auf dem Mobiltelefon handelt, habe ich mich für die Überwachung von drei Berührungsereignissen auf dem Mobiltelefon entschieden, um die Überwachung zu implementieren, und zwei implementiert Scrolling-Effekte, einer erfolgt über -webkit-transform und der andere über das Top-Attribut. Die beiden Implementierungen können den grundlegenden Effekt des Scrollens erzielen, aber top ist nicht zum Scrollen während des Scrollens geeignet, kann jedoch das Problem des Attributs „postion:fixed“ beim Scrollen lösen, während transform das Scrollen während des Scrollens erreichen kann, das Problem jedoch nicht lösen kann Problem der Position: Das Problem wurde behoben. Am Ende überlegen wir, welche Implementierungsmethode verwendet werden soll.

Hauptimplementierung der Geschäftslogik

handleTouchMove(event){
 event.preventDefault();
 this.currentY = event.targetTouches[0].screenY;
 this.currentTime = new Date().getTime();
 // 二次及以上次数滚动（间歇性滚动）时间和路程重置计算，0.05是间歇性滚动的停顿位移和时间比
 if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {
  this.startTime = new Date().getTime();
  this.resetY = this.currentY;
 }
 this.distance = this.currentY - this.startY;
 let temDis = this.distance + this.oldY;
 /*设置移动最小值*/
 temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis;
 /*设置移动最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue) * 1 / 3 : temDis;
 this.$el.style["top"] = temDis + &#39;px&#39;;
 this.lastY = this.currentY;
 this.lastTime = this.currentTime;
 this.dispatchEvent();
 this.scrollFunc(event);
},

Codeinterpretation: Dies ist der Rückruf zum Abhören des Touchmove-Ereignisses, das hauptsächlich die Spitze oder das Webkit des Zielknotens berechnet this.$el Der Wert von translatorY in transform und die Berechnungsreferenz basieren hauptsächlich auf der vertikalen Bewegungsentfernung des BildschirmsY. Natürlich müssen auch die Maximal- und Minimalwerte beurteilt werden Die Bewegung kann den Maximalwert und den Minimalwert um eine bestimmte Distanz überschreiten. Addieren Sie also. Das ist eine 1/3-Bewegungsberechnung. Die Hauptsache hier könnte die Beurteilung und Berechnung des intermittierenden Scrollens sein, die hauptsächlich dem Trägheitsscrollen dient und darauf abzielt, den Wert des Trägheitsscrollens genauer zu machen.

handleTouchEnd(event){
 /*点透事件允许通过*/
 if (!this.distance) return;
 event.preventDefault();
 let temDis = this.distance + this.oldY;
 /*计算缓动值*/
 temDis = this.computeSlowMotion(temDis);
 /*设置最小值*/
 temDis = temDis > this.minValue ? this.minValue : temDis;
 /*设置最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue : temDis;
 this.$el.style["transitionDuration"] = &#39;500ms&#39;;
 this.$el.style["transitionTimingFunction"] = &#39;ease-out&#39;;
 /*确定最终的滚动位置*/
 setTimeout(()=> {
  this.$el.style["top"] = temDis + 'px';
 }, 0);
 // 判断使用哪一种监听事件
 if (this.slowMotionFlag) {
  this.dispatchEventLoop();
 } else {
  this.dispatchEvent();
 }
 this.$el.addEventListener('transitionend', ()=> {
  window.cancelAnimationFrame(this.timer);
 });
 this.scrollFunc(event);
}

Codeinterpretation: Dies ist der Rückruf für die Touchend-Ereignisüberwachung, bei der bestimmt werden muss, ob Klick- und Tippereignisse abgefangen werden sollen, außerdem der Trägheitsverringerungswert berechnet und die endgültigen Maximal- und Minimalwerte festgelegt werden müssen , und Animationseffekte und Beschleunigungseffekte festlegen. Lassen Sie uns über die Berechnung des rollenden Scrollens sprechen:

// 计算惯性滚动值
computeSlowMotion(temDis){
 var duration = new Date().getTime() - this.startTime;
 // 300毫秒是判断间隔的最佳时间
 var resetDistance = this.currentY - this.resetY;
 if (duration < 300 && Math.abs(resetDistance) > 10) {
  var speed = Math.abs(resetDistance) / duration,
   destination;
  // 末速度为0 距离等于初速度的平方除以2倍加速度
  destination = (speed * speed) / (2 * this.deceleration) * (resetDistance < 0 ? -1 : 1);
  this.slowMotionFlag = true;
  return temDis += destination;
 } else {
  this.slowMotionFlag = false;
  return temDis;
 }
},

Code-Interpretation: Der Rolling-Rolling-Algorithmus berechnet hauptsächlich die Anfangsgeschwindigkeit basierend auf einer Entfernung und Zeit und berechnet das Rollen, wenn die Beschleunigung des nativen Scrollens größer ist als 0,006 Gesamtverdrängung. Hier geht es vor allem darum, den Erfahrungswert von 300 ms zu beurteilen.

Zusammenfassung

Dies ist der allgemeine Prozess und die Überlegung, in Zukunft werden weitere Funktionen zur Erweiterung hinzugefügt

Im Anhang finden Sie die Git-Adresse: https://github.com /yejiaming/scroll

Verwandte Empfehlungen:

Über das jQuery-Scrolling-Plug-in scrollable.js Nutzungsanalyse

WeChat-Applet scroll – Detaillierte Erläuterung der Ansichtskomponente

vue verwendet Better-Scroll, um Karussellbilder und Seitenscrollen zu implementieren

Das obige ist der detaillierte Inhalt vonJS implementiert einen benutzerdefinierten Bildlaufeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!