微信小程序長列表組件 recycle-view 修改,使其可以下拉刷新

來源：https://www.e-learn.cn/topic/3844447

微信的長列表組件能夠很好的解決微信小程序大量數據渲染卡頓的問題
但是對下拉數據刷新的動態展示效果卻很差

步驟

1.在小程序對長列表組件 構建npm完成之后,文件目錄如下圖所示

 

 

 2.首先打開 recycle-view.js 文件 在組件屬性列表對象properties 中添加兩個屬性

// 以下是自定義組件下拉刷新屬性
    refresherenabled: Boolean,
    refreshertriggered: Boolean

 

 

 3.在 recycle-view.wxml 文件中 給組件 scroll-view 添加屬性

refresher-enabled="{{!!refresherenabled}}"
    refresher-triggered="{{!!refreshertriggered}}"
    refresher-threshold="{{100}}"
    bindrefresherrefresh="_refresherrefresh"

 

 

 

refresherenabled="{{ispull}}" //ispull 控制是否開啟下拉刷新
refreshertriggered="{{isstoppull}}" //isstoppull 下拉刷新狀態完成之后,結束下拉的狀態
bindrefresherrefresh="_refresherrefresh"

 

4.在 recycle-view.js 文件中添加對應的方法

 

 

 

5.頁面引用組件

 

 

refresherenabled="{{ispull}}"//ispull 控制是否開啟下拉刷新 refreshertriggered="{{isstoppull}}"//isstoppull 下拉刷新狀態完成之后,結束下拉的狀態 bindrefresherrefresh="_refresherrefresh"