Maison > Article > interface Web > Comment obtenir un retour en haut grâce à la méthode interpolation dans le projet vue

Comment obtenir un retour en haut grâce à la méthode interpolation dans le projet vue

亚连original: 2018-06-02 10:07:082905parcourir

Cet article présente principalement l'implémentation de la méthode tween dans le projet Vue. Retour en haut Je vais maintenant le partager avec vous et lui donner une référence.

1. Scene

tween.js est une bibliothèque d'animation js qui peut générer des effets d'animation fluides

Quand vous quoi faites-vous lorsque vous souhaitez implémenter une fonction de retour en haut ? La plupart des gens utiliseront document.body.scrollTop =0 ; écrire de cette façon réalise la fonction,

Mais pour être plus délicat, nous pourrions aussi bien bien utiliser tween Faisons-le avec assouplissement et voyons comment cela fonctionne.

Nous avons déjà écrit des articles sur les préadolescents, nous ne les présenterons donc pas ici.

2. Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
      #app{width: 100%; height: 3000px;background: #CCCCCC;}
      .backTop{
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid #ff0000;
        position: fixed;
        right: 1rem;
        bottom: 2rem;
        border-radius: 50%;
        /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
        background-size: 70% 100%;
      }
    </style>
  </head>
  <body>
    <p id="app">
      <p @click="backTop()" class="backTop">Top</p>
    </p>
    
    <script type="text/javascript">
      var app = new Vue({
        el:"#app",
        data:{
          
        },
        methods:{
          backTop(){
//             * t: current time（当前时间）；
//             * b: beginning value（初始值）；
//             * c: change in value（变化量）；
//             * d: duration（持续时间）。
            var Tween = {
              Linear: function(t, b, c, d) { //匀速运动，想要实现其他的效果可以使用tween的其他方法
                return c * t / d + b; 
              }
            }
            Math.tween = Tween;
            var t = 1;
            const b = document.documentElement.scrollTop;
            const c = 50;
            const d = 5;
            const setInt = setInterval(()=>{
              t--;
              console.log(t)
              if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
              console.log(t);
              const backTop = Tween.Linear(t,b,c,d);
               console.log(backTop);
              document.documentElement.scrollTop = backTop;
            },20)
          }
        }
      })
    </script>
  </body>
</html>

3. requestAnimationFrame réécrit la méthode setInterval :

methods:{
      backTop(){
        var Tween = {
          Linear: function(t, b, c, d) { //匀速
            return c * t / d + b; 
          }
        }
        Math.tween = Tween;
        var t = 1;
        const b = document.body.scrollTop;
        const c = 1;
        const d = 1;
        var timer;
        timer= requestAnimationFrame(function fn(){
          if(document.body.scrollTop > 0){
            t--;
            console.log(t)
            console.log(t);
            const backTop = Tween.Linear(t,b,c,d);
             console.log(backTop);
            document.body.scrollTop = backTop;
            timer = requestAnimationFrame(fn);
          }else{
            cancelAnimationFrame(timer)
          }
        })
      }
    }

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de l'invalidation des polices et des ressources d'images après le packaging de vue (tutoriel détaillé)

Utilisation de l'expérience utilisateur BootStrap framework dans React (Tutoriel détaillé)

Acquisition et expiration automatiques des cookies via les robots d'exploration Web (Tutoriel détaillé)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment ajouter une interface fictive en arrière-plan au projet de construction vue-cliArticle suivant：Comment ajouter une interface fictive en arrière-plan au projet de construction vue-cli

Articles Liés

Voir plus