Comment obtenir un retour en haut grâce à la méthode interpolation dans le projet vue-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-02 10:07:08

original

2942 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!