Vue implémente le composant qui renvoie le top backToTop

Cet article présente principalement l'implémentation d'un composant backToTop dans Vue, qui peut obtenir l'effet de retour au sommet et a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage

J'apprends VUE. récemment. J'étudie comment utiliser VUE pour implémenter l'encapsulation d'un composant. Je laisserai une note aujourd'hui

Avant-propos

Retour en haut Cette fonction peut être. implémenté avec jq. C'est si simple. Implémentation, une animation combinée avec scrollTo peut être effectuée

Aujourd'hui, nous allons essayer d'encapsuler une implémentation native de js vers le haut
C'est assez difficile à écrire ; , avec l'aide de github, j'ai regardé l'essentiel des autres et je l'ai un peu encapsulé ;

Bien sûr, ce n'est pas comme utiliser scrollTo pour ajuster la position directement, comment cela peut-il être justifié sans effet de transition !! toujours fait.

Sans plus tard, jetons un oeil aux rendus...

Rendu

Idée d'implémentation

1. La transition utilise requestAnimationFrame, qui ne prend en charge que IE10+, il doit donc être compatible

2. La vue de défilement est window.pageYOffset, ce produit prend en charge IE9+

3. afin de le rendre contrôlable Mieux, l'icône utilise iconfont, voir le code pour plus de détails

Que pouvez-vous apprendre ?

1. Apprendre quelques pages sur des sujets liés à l'informatique

2. Quelques connaissances en animation API

3. Vue a encapsulé les connaissances liées aux composants et l'application des connaissances liées à la surveillance et à la destruction du cycle de vie et des événements
   

Mise en œuvre la fonction

1. La vue affiche le bouton et l'icône de retour en haut à 350 par défaut

2. Texte et couleur d'invite, personnalisation de en haut, en bas, à gauche et à droite de l'icône, les champs ont des formats et des valeurs par défaut limités

3. Personnalisation de la couleur, de la forme et de la taille de l'icône Définition, les champs ont des formats et des valeurs par défaut limités ​​

4. Personnalisation des effets de transition, utilisation : scrollIt(0, 1500, 'easeInOutCubic', callback);

1. Retour à le point de vue, c'est-à-dire où faire défiler

2. Temps de transition (niveau ms)

3. Un tas d'effets de transition et de formats de chaînes sont en fait des fonctions de calcul glissant..

4. Bien sûr, les paramètres par défaut sont indispensables, sauf rappel

5. La compatibilité est IE9+, je spécialement ouvert une machine virtuelle pour l'essayer

Code

scrollIt.js – implémentation du défilement transitionnel

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

backToTop.vue

<template>
 <p class="back-to-top" @click="backToTop" v-show="showReturnToTop" @mouseenter="show" @mouseleave="hide">
  <i :class="[bttOption.iClass]" :style="{color:bttOption.iColor,&#39;font-size&#39;:bttOption.iFontsize}"></i>
  <span class="tips" :class="[bttOption.iPos]" :style="{color:bttOption.textColor}" v-show="showTooltips">{{bttOption.text}}</span>
 </p>
</template>

<script>
 import { scrollIt } from &#39;./scrollIt&#39;; // 引入动画过渡的实现
 export default {
  name: &#39;back-to-top&#39;,
  props: {
   text: { // 文本提示
    type: String,
    default: &#39;返回顶部&#39;
   },
   textColor: { // 文本颜色
    type: String,
    default: &#39;#f00&#39;
   },
   iPos: { // 文本位置
    type: String,
    default: &#39;right&#39;
   },
   iClass: { // 图标形状
    type: String,
    default: &#39;fzicon fz-ad-fanhuidingbu1&#39;
   },
   iColor: { // 图标颜色
    type: String,
    default: &#39;#f00&#39;
   },
   iFontsize: { // 图标大小
    type: String,
    default: &#39;32px&#39;
   },
   pageY: { // 默认在哪个视图显示返回按钮
    type: Number,
    default: 400
   },
   transitionName: { // 过渡动画名称
    type: String,
    default: &#39;linear&#39;
   }
  },
  data: function () {
   return {
    showTooltips: false,
    showReturnToTop: false
   }
  },
  computed: {
   bttOption () {
    return {
     text: this.text,
     textColor: this.textColor,
     iPos: this.iPos,
     iClass: this.iClass,
     iColor: this.iColor,
     iFontsize: this.iFontsize
    }
   }
  },
  methods: {
   show () { // 显示隐藏提示文字
    return this.showTooltips = true;
   },
   hide () {
    return this.showTooltips = false;
   },
   currentPageYOffset () {
    // 判断滚动区域大于多少的时候显示返回顶部的按钮
    window.pageYOffset > this.pageY ? this.showReturnToTop = true : this.showReturnToTop = false;

   },
   backToTop () {
    scrollIt(0, 1500, this.transitionName, this.currentPageYOffset);
   }
  },
  created () {
   window.addEventListener(&#39;scroll&#39;, this.currentPageYOffset);
  },
  beforeDestroy () {
   window.removeEventListener(&#39;scroll&#39;, this.currentPageYOffset)
  }
 }
</script>

<style scoped lang="scss">
 .back-to-top {
  position: fixed;
  bottom: 5%;
  right: 100px;
  z-index: 9999;
  cursor: pointer;
  width: auto;
  i {
   font-size: 32px;
   display: inline-block;
   position: relative;
   text-align: center;
   padding: 5px;
   background-color: rgba(234, 231, 231, 0.52);
   border-radius: 5px;
   transition: all 0.3s linear;
   &:hover {
    border-radius: 50%;
    background: #222;
    color: #fff !important;
   }
  }
  .tips {
   display: inline-block;
   position: absolute;
   word-break: normal;
   white-space: nowrap;
   width: auto;
   font-size: 12px;
   color: #fff;
   z-index: -1;
  }
  .left {
   right: 0;
   top: 50%;
   margin-right: 50px;
   transform: translateY(-50%);
  }
  .right {
   left: 0;
   top: 50%;
   margin-left: 50px;
   transform: translateY(-50%);
  }
  .bottom {
   bottom: 0;
   margin-top: 50px;
  }
  .top {
   top: 0;
   margin-bottom: 50px;
  }
 }
</style>

Résumé

Du caprice au lancer, afin d'équilibrer la compatibilité et l'évolutivité semblent ont pris quelques heures

Mais cela a été implémenté si vous passez à d'autres langages, comme ng4, cela ne prend qu'une dizaine de minutes,

Maintenant que. J'ai l'idée, la mise en œuvre concerne davantage l'écriture. Quant à l'optimisation des performances, vous pouvez l'envisager lors de l'écriture, ou vous pouvez l'optimiser lorsque vous avez le temps après la mise en œuvre

Ce qui précède est tout le contenu de ceci. Article. J'espère qu'il sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'utilisation du composant de sélection de région VUE (V-Distpicker)

À propos vue Introduction au processus de construction, de packaging et de sortie du projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!