react-component / m-pull-to-refresh Goto Github PK
View Code? Open in Web Editor NEWReact Mobile Pull To Refresh
Home Page: http://react-component.github.io/m-pull-to-refresh/
React Mobile Pull To Refresh
Home Page: http://react-component.github.io/m-pull-to-refresh/
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?
是否能告知能否初始化触发加载,我尝试refreshing初始化为true,但是没有发生变化
下拉滑动期间放手会触发cell的onClick事件,必须下拉停顿一下再放手才能避免触发onClick事件。
请问这个问题该如何避免
建议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.
上拉的时候,第一次进入界面,持续往上拉,不要松开,拉到位置后,会突然跳出下面的提示信息“已完成刷新”,然后放开,再往上拉,就可以正常刷新。这个bug已经关注很久了,希望能解决。
Hi,
First of all, great work :) Maybe you can help me out with my problem. I have the following situation:
but the following happens now, when I add your component:
what I need
Something which helps me to let the user still scroll up, but only refresh at the top of the page.
Ideas
Edit:
奇怪是哪里代码写错了么?总是check fail我就把我遇到的问题写下来吧
修改前效果:
触摸结束时,进入“release”状态,滚动容器停留在触摸结束时的滚动位置,当newprops.refreshing===false时,才reset
期望修改后的效果:
触摸结束后,进入“release”状态,滚动容器回弹至可容纳loading图标显示的位置,之后如前。
getScrollContainer不应该有默认函数,只要定义了该函数,就不需要额外渲染一个ScrollContainer了
如果用户返回一个ref,这个ref只会在ComponentDidMount时才不为undefined,导致进入了需要渲染ScrollContainer的分支,ref取到后,又进入了不需要渲染ScrollContainer的分支,这时children就被多创建了一次。
情景:
引发了我这边一个数据问题,数据不对了;
我这边的一些操作可能在children第一次被创建时就走过了,然后走了些异步逻辑,回来发现相关引用都变成新的了,由于二次创建又走了相关的周期覆盖了最开始的引用。这时多个异步流程链里,前面的拿的是第一次的引用,后面的拿的是第二次的引用,从而引发了一些潜在的bug
临时解法:
getScrollContainer={() => this.scrollViewRef || {}}
<PullToRefresh>
<MyList />
</PullToRefresh>
我不知道在渲染children的时候为什么会包一层StaticRenderer
这样写会多触发运行一次MyList的 constuctor及render
将253,257行的renderChildren 替换为children,可行?
调用几次onRefresh之后就不需要下拉刷新了,如何禁用
在 ListView
中使用时,传过来的 getScrollContainer
第一次必然得到 undefined
,第二次渲染才会使用 ListView
提供的 container,且第二次渲染不会自动触发,在 onTouchMove
等事件产生导致重新渲染时会导致 DOM 结构整体变化,以及 children 被重新创建 / 渲染。
m-pull-to-refresh/src/PullToRefresh.tsx
Line 297 in e60268f
相关:#171
workaround:
const MyPullToRefresh = ({ getScrollContainer, ...props }) => (
<PullToRefresh
getScrollContainer={() => getScrollContainer?.() || true}
{...props}
/>
);
由于 getScrollContainer
被 ListView
覆盖了,因此只能自己包一个 MyPullToRefresh
,保证返回值非 undefined
。
亲测部分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 chrome61document.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;
}
}
在使用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);
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;
某些相对小屏幕手机使用antd-mobile的PullToRefresh组件时下拉距离不够, 调试发现0.6的参数调大即可解决
期望antd-mobile的PullToRefresh组件,及其依赖rmc-pull-to-refresh可以让业务在props中传入该参数值
m-pull-to-refresh/package.json
Line 14 in 68c51c0
<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>
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>
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.