react-component/m-pull-to-refresh

React Mobile Pull To Refresh

rmc-pull-to-refresh

---

React Mobile PullToRefresh Component.

Screenshots

Development

npm install
npm start

Example

http://localhost:8899/examples/

online example: http://react-component.github.io/m-pull-to-refresh/

install

Usage

see example

API

props

name	description	type	default
direction	pull direction, can be up or down	String	down
distanceToRefresh	distance to pull to refresh	number	50
refreshing	Whether the view should be indicating an active refresh	bool	false
onRefresh	Called when the view starts refreshing.	() => void	-
indicator	indicator config	Object	{ activate: 'release', deactivate: 'pull', release: 'loading', finish: 'finish' }
className	additional css class of root dom node	String	-
prefixCls	prefix class	String	'rmc-pull-to-refresh'
damping	pull damping, suggest less than 200	number	100
scale	damping scale	number	0.6

Test Case

npm test

Coverage

npm run coverage

License

rmc-pull-to-refresh is released under the MIT license.

m-pull-to-refresh's Issues

上拉加载，已经到达底部，却没有出现上拉加载

上拉加载已经到底部了，却没有出现上拉加载

<PullToRefresh className="xm-pull-to-refresh" direction="up" refreshing={loading} onRefresh={onRefresh} indicator={{ activate: '松开立即刷新', release: <CircularProgress size={24} />, deactivate: '下拉可刷新', finish: '刷新完成' }} damping={150} > <div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>45</div> <div style={{ height: '2rem' }}>4589</div> </div> </PullToRefresh>

找到原因是 scrollTop 获取的是小数，而clientHeight 获取的是整数导致的

随着市面上各种高分屏，高DPI，都会出现这样的问题

not normal after release

When loading finished, the position will jump back to release position. And then show finished. So, the page will look like bouncing. It's only found in chrome.

如何禁用下拉刷新

调用几次onRefresh之后就不需要下拉刷新了，如何禁用

Touchend setContentStyle触摸结束时回弹至刷新位置

奇怪是哪里代码写错了么？总是check fail我就把我遇到的问题写下来吧

修改前效果：
触摸结束时，进入“release”状态，滚动容器停留在触摸结束时的滚动位置，当newprops.refreshing===false时，才reset
期望修改后的效果：
触摸结束后，进入“release”状态，滚动容器回弹至可容纳loading图标显示的位置，之后如前。

正常滑动情况下 会一直在触发上拉的问题

wrong repo meta info

m-pull-to-refresh/package.json

Line 14 in 68c51c0

"url": "https://github.com/react-component/m-tabs.git"

与 ListView 同时使用时没有正确触发重新渲染

在 ListView 中使用时，传过来的 getScrollContainer 第一次必然得到 undefined，第二次渲染才会使用 ListView 提供的 container，且第二次渲染不会自动触发，在 onTouchMove 等事件产生导致重新渲染时会导致 DOM 结构整体变化，以及 children 被重新创建 / 渲染。

m-pull-to-refresh/src/PullToRefresh.tsx

Line 297 in e60268f

if (getScrollContainer()) {

相关：#171

复现：https://clxjt.csb.app/

workaround：

const MyPullToRefresh = ({ getScrollContainer, ...props }) => (
  <PullToRefresh
    getScrollContainer={() => getScrollContainer?.() || true}
    {...props}
  />
);

由于 getScrollContainer 被 ListView 覆盖了，因此只能自己包一个 MyPullToRefresh，保证返回值非 undefined。

建议clearTimeout 一下 this._timer

建议clearTimeout 一下 this._timer

我在使用的时候发现犹豫没有clearTimeout this._timer，造成

setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the PullToRefresh component.

页面渲染白屏问题

应当在cancelable=true时执行preventDefault操作

How to disable pull to trigger?

In some cases, I want to stop the component being pull to trigger the action. But I did not find the diasbled option to implement.

How could I disable pull?

after theintergrate component on the mobile,the touch scroll can not work.

Hello,after i intergrate this component, my page can not scroll by touch scroll on the mobile,is there any i miss?
mycode:
<div id="main"> <PullToRefresh loadingFunction={this.handlerLoading} loading={ <div className="loading-center" style={{ marginTop: -3 }}> <Loading type="balls" color="#38acff" /> </div> }> {this.props.children} </PullToRefresh> </div>

getScrollContainer不稳定（涉及ref），导致children创建多次的问题

getScrollContainer不应该有默认函数，只要定义了该函数，就不需要额外渲染一个ScrollContainer了

如果用户返回一个ref，这个ref只会在ComponentDidMount时才不为undefined，导致进入了需要渲染ScrollContainer的分支，ref取到后，又进入了不需要渲染ScrollContainer的分支，这时children就被多创建了一次。

情景：

• 引发了我这边一个数据问题，数据不对了；

• 我这边的一些操作可能在children第一次被创建时就走过了，然后走了些异步逻辑，回来发现相关引用都变成新的了，由于二次创建又走了相关的周期覆盖了最开始的引用。这时多个异步流程链里，前面的拿的是第一次的引用，后面的拿的是第二次的引用，从而引发了一些潜在的bug

临时解法：

          getScrollContainer={() => this.scrollViewRef || {}}

must set height and overflow ?

eg:

<Pull2Refresh
  style={{ height: 'calc(100vh - 176px)', overflow: 'auto' }}
  refreshing={loading}
  onRefresh={this.refresh}
  indicator={{ release: <Loading loading /> }}
 >
    <PatientList list={handleList} />
 </Pull2Refresh>

if you don't set, the scroll will always trigger refresh, even you want to look more, i think this is bug;

第一次上拉的时候，会突然跳位，并且不能触发onRefresh

上拉的时候，第一次进入界面，持续往上拉，不要松开，拉到位置后，会突然跳出下面的提示信息“已完成刷新”，然后放开，再往上拉，就可以正常刷新。这个bug已经关注很久了，希望能解决。

可以配置上拉加载更多吗？

小米手机不能触发上拉加载

有性能问题

<PullToRefresh>
 <MyList />
</PullToRefresh>

我不知道在渲染children的时候为什么会包一层StaticRenderer
这样写会多触发运行一次MyList的 constuctor及render

将253，257行的renderChildren 替换为children，可行？

可以提供ts导出文件啊

连续快速下滑，第二次滑动后会直接回弹回去

Reproduction link

Screenshots

当更新 refreshing 状态小于1s时，就会出现此种状况。

isEdge对部分安卓机判断不生效

亲测部分android机型拖动多次会拖动不了，因为 ele.scrollHeight - ele.scrollTop === ele.clientHeight + 1，所以一直判断不为edge，上拉刷新不了，所以isEdge方法可以加一行代码兼容一下。
机型为：oppo A57

修改isEdge函数
isEdge(ele, direction) {
const container = this.props.getScrollContainer();
// 父容器需要设置height100vh，scroll auto时，scrollTop才会改变，不然一直为0
if (container && container === document.body) {
// In chrome61 document.body.scrollTop is invalid
const scrollNode = document.scrollingElement ? document.scrollingElement : document.body;
if (direction === UP) {
return scrollNode.scrollHeight - scrollNode.scrollTop <= window.innerHeight;
}
if (direction === DOWN) {
return scrollNode.scrollTop <= 0;
}
}
if (direction === UP) {
// 兼容部分android机型，需要 + 1px
return ele.scrollHeight - ele.scrollTop === ele.clientHeight + 1 || ele.scrollHeight - ele.scrollTop === ele.clientHeight;
}
if (direction === DOWN) {
return ele.scrollTop <= 0;
}
}

use react-hammer

https://github.com/JedWatson/react-hammerjs

当容器内有子容器 overflow:auto 当滚动子容器的时候 会触发onRefresh 导致子容器内部无法正常滚动

Does getScrollContainer should return type HTMLElement instead of ReactNode?

When using this lib inside a tsx file, like the code below

// ...
import RMCPullToRefresh from "rmc-pull-to-refresh";

const PullToRefresh = ({ onRefresh, children }: IPullToRefreshProps) => {
  // my other logics

  return (
    <RMCPullToRefresh
      getScrollContainer={() => document.body}
      direction="down"
      scale={1}
      distanceToRefresh={REFRESH_DISTANCE}
      onRefresh={onRefresh}
      indicator={{
        activate: <ActivateIndicator />,
        deactivate: <DeactivateIndicator />,
        finish: <FinishIndicator />,
        release: <ReleaseIndicator />,
      }}
      damping={REFRESH_DISTANCE}
    >
      {children}
    </RMCPullToRefresh>
  );
};

I got into this issue:

Compiled with problems:

ERROR in src/components/PullToRefresh/PullToRefresh.tsx:128:7

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PropsType | Readonly<PropsType>): PullToRefresh', gave the following error.
    Type '() => HTMLElement' is not assignable to type '() => ReactNode'.
      Type 'HTMLElement' is not assignable to type 'ReactNode'.
        Type 'HTMLElement' is missing the following properties from type 'ReactPortal': key, type, props
  Overload 2 of 2, '(props: PropsType, context: any): PullToRefresh', gave the following error.
    Type '() => HTMLElement' is not assignable to type '() => ReactNode'.
    126 |   return (
    127 |     <RMCPullToRefresh
  > 128 |       getScrollContainer={() => document.body}
        |       ^^^^^^^^^^^^^^^^^^
    129 |       direction="down"
    130 |       scale={1}
    131 |       distanceToRefresh={REFRESH_DISTANCE}

I think the interface PropsType should be

export interface PropsType {
  getScrollContainer: () => HTMLElement;
  direction: "down" | "up";
  refreshing?: boolean;
  distanceToRefresh: number;
  onRefresh: () => void;
  indicator: Indicator;
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  damping?: number;
  scale?: number;
  children?: ReactNode;
}

instead of

export interface PropsType {
  getScrollContainer: () => React.ReactNode;
  direction: 'down' | 'up';
  refreshing?: boolean;
  distanceToRefresh: number;
  onRefresh: () => void;
  indicator: Indicator;
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  damping?: number;
  scale?: number;
}

---

Branch: master
Commit: e60268f
Parents: e96ce45
Author: duxiaodong <[email protected]>
Committer: duxiaodong <[email protected]>
Date: Mon Jun 15 2020 14:32:42 GMT+0700 (Indochina Time)

ssr support?

Only activate Pull To Refresh when bottom of the PullToRefresh component is visible?

Hi,

First of all, great work :) Maybe you can help me out with my problem. I have the following situation:

• I am using your component in react environment (web) which is loaded/displayed in a react-native webview
• the PullToRefresh component is wrapped around the entire page(-component)
• the react-native webview takes 100% of the device's screen
• the user should still be able to scroll up and down

but the following happens now, when I add your component:

• when the user scrolls to the bottom of the page and up again, the PTL feature is activated and refresh the entire page

what I need

• it only refreshes when the user "sees" the bottom of your component
• or the page is at a certain scroll position (eg scrollTop = 0)

Something which helps me to let the user still scroll up, but only refresh at the top of the page.

Ideas

• can you solve it in your property (eg. add some new feature)
• or do I need to take care of it somehow (eg. find out scroll position in the webview (in the app?) and then enable/wrap the PTL or not?

Edit:

• I have already tried to wrap only the Head-Component (is always the one at the top of the rest), but then you can pull this element down (above all the others). Which looks weird from the user experience perspective.

下拉容器中含有需要左右滑动的子元素，在左右滑动的时候，建议不触发transform 改变下拉容器的位移

在使用overflow-x: scroll 左右滑动的时候，也可能会触发screenY的改变，会触发 transform 产生容器位移，会露出下拉箭头或文案 。
建议可支持添加一个可配置项，在小于某个位移量的时候，不触发transform。

const _diff = Math.round(_screenY - this._ScreenY);
this._ScreenY = _screenY;
this._lastScreenY += this.damping(_diff);

this.setContentStyle(this._lastScreenY);

listview快速下拉并放手，会同时出发下拉刷新和cell上注册的onClick事件

下拉滑动期间放手会触发cell的onClick事件，必须下拉停顿一下再放手才能避免触发onClick事件。

请问这个问题该如何避免

手机端内容往下拉之后 往回滑会触发下拉加载

我buzh不知道现在该如何处理这个问题

阻尼系数0.6建议开放入参

某些相对小屏幕手机使用antd-mobile的PullToRefresh组件时下拉距离不够, 调试发现0.6的参数调大即可解决

期望antd-mobile的PullToRefresh组件，及其依赖rmc-pull-to-refresh可以让业务在props中传入该参数值

是否能告知能否初始化触发加载

是否能告知能否初始化触发加载，我尝试refreshing初始化为true，但是没有发生变化