【移動應(yīng)用開發(fā)技術(shù)】小程序怎么實現(xiàn)下拉刷新

這篇文章主要介紹了小程序怎么實現(xiàn)下拉刷新，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。enablePullDownRefreshenablePullDownRefresh是最容易實現(xiàn)下拉刷新的方法，在json文件中將enablePullDownRefresh設(shè)置為true，在Page中監(jiān)聽onPullDownRefresh事件即可，支持點擊頂部標題欄回到頂部，自定義標題欄時會失效，還可以通過直接調(diào)用wx.startPullDownRefresh()觸發(fā)下拉刷新事件，產(chǎn)生下拉刷新動畫，處理完下拉刷新中的數(shù)據(jù)更新后調(diào)用wx.stopPullDownRefresh()結(jié)束動畫即可。這種形式的下拉刷新的優(yōu)點很明顯就是簡單，沒有限制，但是缺點也同樣明顯：下拉動畫太過簡單，交互不夠優(yōu)雅且不能自定義下拉動畫當自定義標題欄時，fixed定位，在Android下標題欄也會被一起下拉scroll-viewscroll-view是官方的一個滾動視圖組件，使用很簡單，想要設(shè)置上拉刷新代碼如下：<scroll-view

class="scroll"

scroll-y

bindscrolltoupper="refresh">

<view

class="content">content</view>

</scroll-view>想要利用scroll-view實現(xiàn)上拉刷新，需要注意：一定要給scroll-view設(shè)置固定高度，否則監(jiān)聽事件不會觸發(fā)設(shè)置縱向滾動scroll-yscroll-view內(nèi)的內(nèi)容高度一定要比scroll-view高度要高，否則無法產(chǎn)生縱向滾動，就無法觸發(fā)監(jiān)聽事件scroll-view缺點：由于iOS有橡皮筋效果，因此最終效果會與Android有一定的差異剛打開頁面時上拉是無法觸發(fā)上拉監(jiān)聽事件，需要先向下滾動，觸發(fā)滾動，然后再上拉滾動才能觸發(fā)監(jiān)聽事件當有自定義頭部時，scroll-view需要一個高度計算，減去頭部高度scroll-view優(yōu)點：可以自定義加載動畫代碼相對簡單相對enablePullDownRefresh，scroll-view對滾動列表控制更加方便：scroll-into-view：滾動到指定元素enable-back-to-top：iOS點擊頂部狀態(tài)欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向，且當自定義標題欄后就會失效官方并不推薦使用scroll-view做下拉刷新，官方文檔上有這樣一個tip自定義下拉刷新自定義下拉刷新最主要希望解決的問題還是在Android使用enablePullDownRefresh時fixed定位的標題欄或?qū)Ш綑跁幌吕膯栴}，同時兩端在下拉刷新時的動畫保持一致，其實實現(xiàn)起來并不難，接下來就看看具體實現(xiàn):wxml:<view

class="scroll"

bindtouchstart="touchStart"

bindtouchmove="touchMove"

bindtouchend="touchEnd">

<view

class="animation">

<view

class="loading"></view>

<text

class="tip">{{state

===

0

?

'下拉刷新'

:

state

===

1?

'松開刷新'

:

'刷新中'}}</text>

</view>

<view

style="transform:

translateY({{translateHeight}}rpx)">

<slot

name="content"></slot>

</view>

</view>這個文件定義組件的模版，有一個滾動view包裹，綁定了touch事件，里面包含下拉刷新時的動畫，和一個slot，slot用于插入滾動列表的內(nèi)容wxss:.animation

{

display:

flex;

justify-content:

center;

align-items:

center;

width:

100%;

height:

150rpx;

margin-bottom:

-150rpx;

background-color:

#fff;

}

.loading

{

width:

30rpx;

height:

30rpx;

border:6rpx

solid

#333333;

border-bottom:

#cccccc

6rpx

solid;

border-radius:

50%;

animation:load

1.1s

infinite

linear;

}

@keyframes

load{

from{

transform:

rotate(0deg);

}

to{

transform:

rotate(360deg);

}

}

.tip

{

margin-left:

10rpx;

color:

#666;

}樣式文件這沒什么特別的js:let

lastY

=

0

//

上一次滾動的位置

let

scale

=

750

/

wx.getSystemInfoSync().windowWidth

//

rpx轉(zhuǎn)化比例

Component({

options:

{

multipleSlots:

true

},

data:

{

scrollTop:

0,

translateHeight:

0,

//

平移距離

state:

-1

},

properties:

{

//

觸發(fā)下拉刷新的距離

upperDistance:

{

type:

Number,

value:

150

}

},

methods:

{

//

監(jiān)聽滾動，獲取scrollTop

onPageScroll

(e)

{

this.data.scrollTop

=

e.scrollTop

},

touchStart

(e)

{

lastY

=

e.touches[0].clientY

},

touchMove

(e)

{

let

clientY

=

e.touches[0].clientY

let

offset

=

clientY

-

lastY

if

(this.data.scrollTop

>

0

||

offset

<

0)

return

this.data.translateHeight

+=

offset

this.data.state

=

0

lastY

=

e.touches[0].clientY

if

(this.data.translateHeight

-

this.data.scrollTop

*

scale

>

this.data.upperDistance)

{

this.data.state

=

1

}

this.setData({

translateHeight:

this.data.translateHeight,

state:

this.data.state

})

},

touchEnd

(e)

{

if

(this.data.translateHeight

-

this.data.scrollTop

*

scale

>

this.data.upperDistance)

{

this.setData({

translateHeight:

150

})

this.triggerEvent('scrolltoupper')

this.setData({

state:

2

})

}

else

if

(this.data.scrollTop

<=

0)

{

this.stopRefresh()

}

},

//

停止刷新

stopRefresh

()

{

this.setData({

translateHeight:

0,

state:

-1

},

()

=>

{

wx.pageScrollTo({

scrollTop:

0,

duration:

0

})

})

}

}

})這個下拉刷新組件最重要的是控制下拉刷新的時機，代碼體現(xiàn)就是定義了一個upperDistance，下拉刷新的距離來判斷是否執(zhí)行刷新。手指滑動時，獲取滑動距離，translateHeight累加用于展示，在touchEnd事件中判斷滑動距離是否達到設(shè)定值，達到設(shè)定值就發(fā)送scrolltoupper事件，在父組件中監(jiān)聽即可，否則停止刷新。<header

title="下拉刷新"

background="#fff"></header>

<refresh-scroll

id="refreshScroll"

bindscrolltoupper="refresh">

<view

class="item"

slot="content"

wx:for="{{list}}">{{item}}</view>

</refresh-scroll>Page({

data:

{

list:

[]

},

onLoad:

function

()

{

this.refreshScroll

=

this.selectComponent('#refreshScroll')

for

(let

i

=

0;

i

<

10;

i++)

{

this.data.list.push(i)

}

this.setData({

list:

this.data.list

})

},

onPageScroll

(e)

{

this.refreshScroll.onPageScroll(e)

},

onReachBottom

()

{

wx.showLoading({

title:

'onReachBottom'

})

setTimeout(()

=>

{

wx.hideLoading()

},

1000)

},

refresh:

function

(e)

{

setTimeout(()

=>

{

this.refreshScroll