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

recycle-view修改屬性,使其可以下拉刷新

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

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

步驟

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"

 

 

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

 

 

5.引用組件

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