vue项目tween方法实现返回顶部的示例代码

2019-11-19 14:15:33

字体：大中小

来源：转载

供稿：网友

一、场景

tween.js是一款可生成平滑动画效果的js动画库

当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，

不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。

之前我们写过tween的相关文章，这里不做介绍了。

二、代码

<!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>    <div id="app">      <div @click="backTop()" class="backTop">Top</div>    </div>        <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>

三、requestAnimationFrame改写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)          }        })      }    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Spring Boot/VUE中路由传递参数的实现代码

下一篇：Vue2.0系列之过滤器的使用