【移動應用開發(fā)技術】如何利用scroll-view組件實現(xiàn)小程序回到頂部特效

【移動應用開發(fā)技術】如何利用scroll-view組件實現(xiàn)小程序回到頂部特效

這篇文章主要介紹了如何利用scroll-view組件實現(xiàn)小程序回到頂部特效，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。這里小程序有個組件是可以實現(xiàn)的，那就是scroll-view組件，他具有很多的屬性，其中我們要利用到以下兩個屬性來處理：通過滾動觸發(fā)事件，獲取距離文檔頂部的scrollTop值，當達到一定條件【>300】的時候，顯示gotop層，針對這個層寫點擊事件，重新設置scroll-top值，偶然間發(fā)現(xiàn)設置scroll-top的一個bug，如果我下一次設置的值和本次scroll-top值是一樣的，那么文檔并不會有任何動作。因此我的做法是在0和1之間切換設置，具體做法如下：<scroll-view

style="height:

100%;"

scroll-y="true"

scroll-top="{{scrollTop.scroll_top}}"

bindscroll="scrollTopFun">

<view

style="height:

11111rpx;

border:

solid

1px

red;">

123456

{{test}}

</view>

</scroll-view>

<view

style="position:

absolute;

bottom:

50rpx;

right:

30rpx;

width:

120rpx;

height:

120rpx;

border:

solid

1px

green;"

wx:if="{{scrollTop.goTop_show}}"

catchtap="goTopFun"></view>JS：Page({

data:

{

test:

"",

scrollTop:

{

scroll_top:

0,

goTop_show:

false

}

},

scrollTopFun:

function

(e)

{

console.log(e.detail);

if

(e.detail.scrollTop

>

300)

{//觸發(fā)gotop的顯示條件

this.setData({

'scrollTop.goTop_show':

true

});

console.log(this.data.scrollTop)

}

else

{

this.setData({

'scrollTop.goTop_show':

false

});

}

},

goTopFun:

function

(e)

{

var

_top

=

this.data.scrollTop.scroll_top;//發(fā)現(xiàn)設置scroll-top值不能和上一次的值一樣，否則無效，所以這里加了個判斷

if

(_top

==

1)

{

_top

=

0;

}

else

{

_top

=

1;

}

this.setData({

'scrollTop.scroll_top':

_top