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

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

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

if

(_top

==

1)

{

_top

=

0;

}

else

{

_top

=

1;

}

this.setData({

'scrollTop.scroll_top':

_top