前言：
很多朋友在進(jìn)行小程序開(kāi)發(fā)時(shí)，需要做下拉刷新功能，大部分人是直接使用系統(tǒng)的下拉刷新功能的。
- 在 .json文件中設(shè)置
{
"enablePullDownRefresh": true
}
- 使用
onPullDownRefresh()監(jiān)聽(tīng)用戶(hù)下拉操作，實(shí)現(xiàn)刷新操作酌摇；
在這里插入圖片描述 - 也可以通過(guò)
wx.startPullDownRefresh和wx.stopPullDownRefresh觸發(fā)和關(guān)閉頁(yè)面下拉刷新膝舅；
一般人使用該方法就可以做出下拉刷新的效果，但是這個(gè)方法也有其缺點(diǎn)：
- 沒(méi)有辦法自定義動(dòng)畫(huà)效果窑多。
- 該下拉刷新只能出現(xiàn)在最頂部仍稀，例如：
在這里插入圖片描述
當(dāng)下拉刷新需要在全部、待付款埂息、待發(fā)貨技潘、待收貨這幾個(gè)tab下面時(shí)，系統(tǒng)的下拉刷新就無(wú)法滿足需要千康，我們就需要使用scroll-view來(lái)自定義下拉刷新享幽。
用scroll-view內(nèi)refresher-enabled屬性開(kāi)啟自定義刷新
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 開(kāi)啟自定義下拉刷新 | 最低版本 |
|---|---|---|---|---|---|
| refresher-enabled | boolean | false | 否 | 開(kāi)啟自定義下拉刷新 | 2.10.1 |
| refresher-threshold | number | 45 | 否 | 設(shè)置自定義下拉刷新閾值 | 2.10.1 |
| refresher-default-style | string | "black" | 否 | 設(shè)置自定義下拉刷新默認(rèn)樣式，支持設(shè)置 black 拾弃、 white 值桩、 none， none 表示不使用默認(rèn)樣式 | 2.10.1 |
| refresher-background | string | "#FFF" | 否 | 設(shè)置自定義下拉刷新區(qū)域背景顏色 | 2.10.1 |
| refresher-triggered | boolean | false | 否 | 設(shè)置當(dāng)前下拉刷新?tīng)顟B(tài)豪椿，true 表示下拉刷新已經(jīng)被觸發(fā)奔坟，false 表示下拉刷新未被觸發(fā) | 2.10.1 |
| bindrefresherpulling | eventhandle | 否 | 自定義下拉刷新控件被下拉 | 2.10.1 | |
| bindrefresherrefresh | eventhandle | 否 | 自定義下拉刷新被觸發(fā) | 2.10.1 | |
| bindrefresherrestore | eventhandle | 否 | 自定義下拉刷新被復(fù)位 | 2.10.1 | |
| bindrefresherabort | eventhandle | 否 | 自定義下拉刷新被中止 | 2.10.1 |
實(shí)現(xiàn)下拉刷新方法
wxml設(shè)置：
<scroll-view scroll-y style="width: 100%;height:100%;" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black"
refresher-background="white" refresher-triggered="{{triggered}}" bindrefresherrefresh="onScrollRefresh">
</scroll-view>
refresher-enabled設(shè)置為true表示啟用自定義下拉刷新，refresher-threshold為100表示下拉刷新的下拉高度為100, refresher-default-style選black搭盾，這個(gè)樣式是默認(rèn)的咳秉，和系統(tǒng)的也一致，refresher-background背景顏色選白色鸯隅，refresher-triggered表示下拉刷新?tīng)顟B(tài)澜建，onScrollRefresh是下拉刷新事件。
Js設(shè)置：
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
triggered: false,
},
//用戶(hù)下拉動(dòng)作
onScrollRefresh: function () {
var that=this;
setTimeout(function(){
that.setData({
triggered: false,
})
},2000);
},
當(dāng)下拉時(shí)triggered會(huì)自動(dòng)變?yōu)閠rue蝌以，2000毫秒后手動(dòng)將triggered變?yōu)閒alse下拉刷新就會(huì)彈回去炕舵。
最后效果：
在這里插入圖片描述
這樣就可以做出簡(jiǎn)易的自定義下拉刷新了，朋友們可以自己嘗試一下自定義下拉刷新跟畅，嘗試更多功能幕侠。
