vue項目tween方法實現(xiàn)返回頂部的示例代碼

第vue項目tween方法實現(xiàn)返回頂部的示例代碼當你要實現(xiàn)一個返回頂部的功能時候你會怎么做，大部分人會使用document.body.scrollTop=0；這么寫就實現(xiàn)了功能，

不過要更加的細膩一點我們不妨用tween的緩動來實現(xiàn)，看看效果如何吧。

之前我們寫過tween的相關(guān)文章，這里不做介紹了。

二、代碼

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title/title

scriptsrc="/npm/vue"/script

styletype="text/css"

#app{width:100%;height:3000px;background:#CCCCCC;}

.backTop{

width:1.5rem;

height:1.5rem;

border:1pxsolid#ff0000;

position:fixed;

right:1rem;

bottom:2rem;

border-radius:50%;

/*background:url(/static/imgs/backtop20250226.png)no-repeat40%;*/

background-size:70%100%;

/style

/head

body

divid="app"

div@click="backTop()"Top/div

/div

scripttype="text/javascript"

varapp=newVue({

el:"#app",

data:{

methods:{

backTop(){

//*t:currenttime（當前時間）；

//*b:beginningvalue（初始值）；

//*c:changeinvalue（變化量）；

//*d:duration（持續(xù)時間）。

varTween={

Linear:function(t,b,c,d){//勻速運動，想要實現(xiàn)其他的效果可以使用tween的其他方法

returnc*t/d+b;

Math.tween=Tween;

vart=1;

constb=document.documentElement.scrollTop;

constc=50;

constd=5;

constsetInt=setInterval(()={

t--;

console.log(t)

if(document.documentElement.scrollTop==0){clearInterval(setInt)}

console.log(t);

constbackTop=Tween.Linear(t,b,c,d);

console.log(backTop);

document.documentElement.scrollTop=backTop;

},20)

/script

/body

/html

三、requestAnimationFrame改寫setInterval方法：

methods:{

backTop(){

varTween={

Linear:function(t,b,c,d){//勻速

returnc*t/d+b;

Math.tween=Tween;

vart=1;

constb=document.body.scrollTop;

constc=1;

constd=1;

vartimer;

timer=requestAnimationFrame(functionfn(){

if(document.body.scrollTop0){

t--;

console.log(t)

console.log(t);

constbackTop=Tween.Linear(t,b,c,d);

console.log(backTop);

document.body.scrollTop=backTop;

timer=req