apex-pull-refresh

一个拉动刷新组件

仅支持 react 16.8+ 版本

目前下拉刷新组件无法与虚拟dom组件一起使用

Installation

npm i apex-pull-refresh  --save

Properties

children

Prop	Default	Type	Description
LoadingCom	"正在加载"	react组件	加载时显示的元素
pullRefresh	true	boolean	true为下拉刷新,false为上拉刷新
showHeight		number	列表显示的高度,默认为屏幕高度
dragHeight	80	number	最大拉动的高度
dragAllowHeight	70	number	拉动到多少显示允许更新
viscousFeeling	2	number	下拉时的粘滞感觉，默认为2， 1为没有粘滞感， 不建议设置为2以上
timeout	10000	number	超时时间,单位毫秒
timeoutTip	"网络有点问题,稍后再试"	string	超时提示信息
continueDragTip	"继续拖动"	string	还没到达拖动提示
loosenRefreshTip	"松开刷新"	string	松开就能刷新提示
completeRefreshTip	"刷新完成"	string	完成刷新提示
completeRefreshAwaitTime	1000	number	完成刷新之后恢复时间
refreshTipBackColor	'#ffffff'	string	刷新提示的背景颜色
refreshTipFontColor	'#000000'	string	刷新提示字体颜色
refreshTipFontSize	15	number	刷新提示字体大小
startRefresh	() => { }		开始刷新回调函数
timeoutRefresh	() => { }		超时执行的回调函数
closeRefresh	() => { }		刷新中断回调函数

Use

import React, { useState, useEffect } from 'react';
import ApexPullRefresh from 'apex-pull-refresh';

export default () => {

  const [arr, setArr] = useState([1, 2, 3, 4, 5, 6, 7])

  return <ApexPullRefresh
    pullRefresh={true}
    showHeight={300}
    completeRefreshAwaitTime={400}
    startRefresh={(restorable) => {
      console.log("开始刷新")
      // 你的处理
      restorable()  // 加载完成后一定要调用
    }}
    timeoutRefresh={() => {
      console.log("刷新超时")
      // 你的处理
    }}
    closeRefresh={() => {
      console.log("刷新中断")
      // 你的处理
    }}
  >
    {
      arr.map((item, index) => <div key={index} style={{ height: 50, display: 'flex', paddingLeft: 30, alignItems: 'center' }}><p>{item}</p></div>)
    }
  </BpListView>
}