Vue implementiert die Komponente, die den Top-BackToTop zurückgibt

In diesem Artikel wird hauptsächlich die Implementierung einer BackToTop-Komponente in Vue vorgestellt, die einen Return-to-Top-Effekt erzielen kann und einen gewissen Referenzwert hat.

Ich lerne VUE kürzlich. Ich untersuche, wie man mit VUE die Kapselung einer Komponente implementiert. Ich werde heute eine Notiz hinterlassen

Vorwort

Zurück nach oben Diese Funktion kann sein implementiert mit jq. Es ist so einfach, eine animierte Kombination mit scrollTo durchzuführen

Heute werden wir versuchen, eine native js-Implementierung nach oben zu kapseln
Es ist ziemlich schwierig zu schreiben , mit Hilfe von Github habe ich mir das Wesentliche angesehen und es ein wenig zusammengefasst ;

Natürlich ist es nicht so, als würde man scrollTo verwenden, um die Position direkt anzupassen, ohne einen Übergangseffekt zu haben!! immer noch fertig.

Werfen wir ohne Umschweife einen Blick auf die Renderings...

Rendering

Implementierungsidee

1. Der Übergang verwendet requestAnimationFrame, das Das Produkt unterstützt nur IE10+, daher muss es kompatibel sein

2. Die Scroll-Ansicht ist window.pageYOffset. Dieses Produkt unterstützt IE9+ 🎜>

Was können Sie lernen?

Lernen Sie einige Seiten zum Thema Informatik

Einige Kenntnisse im Bereich Animation API

1. Vue-Kapselungskomponenten-bezogenes Wissen und die Anwendung von Lebenszyklus- und Ereignisüberwachung und Zerstörungsbezogenem Wissen
3. Implementierung die Funktion

   
   

Die Ansicht zeigt standardmäßig die Schaltfläche „Zurück nach oben“ und das Symbol bei 350 an

Prompter Text und Farbe, Anpassung von Oben, unten, links und rechts des Symbols haben die Felder begrenzte Formate und Standardwerte

1. Anpassung der Symbolfarbe, -form und -größe Definition, Felder haben begrenzte Formate und Standardwerte ​​

2. Anpassung von Übergangseffekten, Verwendung: scrollIt(0, 1500, 'easeInOutCubic', callback);
Zurück zu der Standpunkt der Ansicht, also wohin gescrollt werden soll
Übergangszeit (ms-Ebene)

1. Eine Reihe von Übergangseffekten und Zeichenfolgenformaten sind eigentlich rollierende Berechnungsfunktionen..

2. Natürlich sind Standardparameter unverzichtbar, außer Rückruf
Die Kompatibilität ist IE9+, I Ich habe speziell eine virtuelle Maschine geöffnet, um es auszuprobieren
4. backToTop.vue

export function scrollIt(
 destination = 0,
 duration = 200,
 easing = "linear",
 callback
) {
 // define timing functions -- 过渡动效
 let easings = {
  // no easing, no acceleration
  linear(t) {
   return t;
  },
  // accelerating from zero velocity
  easeInQuad(t) {
   return t * t;
  },
  // decelerating to zero velocity
  easeOutQuad(t) {
   return t * (2 - t);
  },
  // acceleration until halfway, then deceleration
  easeInOutQuad(t) {
   return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  },
  // accelerating from zero velocity
  easeInCubic(t) {
   return t * t * t;
  },
  // decelerating to zero velocity
  easeOutCubic(t) {
   return --t * t * t + 1;
  },
  // acceleration until halfway, then deceleration
  easeInOutCubic(t) {
   return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  },
  // accelerating from zero velocity
  easeInQuart(t) {
   return t * t * t * t;
  },
  // decelerating to zero velocity
  easeOutQuart(t) {
   return 1 - --t * t * t * t;
  },
  // acceleration until halfway, then deceleration
  easeInOutQuart(t) {
   return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
  },
  // accelerating from zero velocity
  easeInQuint(t) {
   return t * t * t * t * t;
  },
  // decelerating to zero velocity
  easeOutQuint(t) {
   return 1 + --t * t * t * t * t;
  },
  // acceleration until halfway, then deceleration
  easeInOutQuint(t) {
   return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
  }
 };
 // requestAnimationFrame()的兼容性封装：先判断是否原生支持各种带前缀的
 //不行的话就采用延时的方案
 (function() {
  var lastTime = 0;
  var vendors = ["ms", "moz", "webkit", "o"];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
   window.requestAnimationFrame =
    window[vendors[x] + "RequestAnimationFrame"];
   window.cancelAnimationFrame =
    window[vendors[x] + "CancelAnimationFrame"] ||
    window[vendors[x] + "CancelRequestAnimationFrame"];
  }

  if (!window.requestAnimationFrame)
   window.requestAnimationFrame = function(callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function() {
     callback(currTime + timeToCall);
    }, timeToCall);
    lastTime = currTime + timeToCall;
    return id;
   };

  if (!window.cancelAnimationFrame)
   window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
   };
 })();

 function checkElement() {
  // chrome,safari及一些浏览器对于documentElemnt的计算标准化,reset的作用
  document.documentElement.scrollTop += 1;
  let elm =
   document.documentElement.scrollTop !== 0
    ? document.documentElement
    : document.body;
  document.documentElement.scrollTop -= 1;
  return elm;
 }

 let element = checkElement(); 
 let start = element.scrollTop; // 当前滚动距离
 let startTime = Date.now(); // 当前时间

 function scroll() { // 滚动的实现
  let now = Date.now();
  let time = Math.min(1, (now - startTime) / duration);
  let timeFunction = easings[easing](time);
  element.scrollTop = timeFunction * (destination - start) + start;

  if (element.scrollTop === destination) {
   callback; // 此次执行回调函数
   return;
  }
  window.requestAnimationFrame(scroll);
 }
 scroll();
}

5. Zusammenfassung

Von der Laune bis zum Hin und Her, um Kompatibilität und Erweiterung des Sex in Einklang zu bringen, schien es wie ein ein paar Stunden.

Aber es wurde erkannt, dass es nur etwa zehn Minuten dauert, wenn man auf andere Sprachen umsteigt,

Die Ideen werden sein Bei der Implementierung geht es mehr um das Schreiben. Sie können darüber nachdenken, während Sie schreiben, oder Sie können es optimieren, wenn Sie nach der Implementierung Zeit haben. Das Obige ist der gesamte Inhalt dieses Artikels wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker)

Über vue Einführung in den Konstruktions-, Verpackungs- und Freigabeprozess des Projekts

Das obige ist der detaillierte Inhalt vonVue implementiert die Komponente, die den Top-BackToTop zurückgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!