❤
npm
Sign UpSign In

rmc-pull-updown-to-refresh-time

1.0.0 • Public • Published

rmc-pull-updown-to-refresh Build Status

An accessible and easy component for ReactJS

简单易用的react拖拉翻页组件

Installing

npm

npm i rmc-pull-updown-to-refresh -S

yarn

yarn add rmc-pull-updown-to-refresh

Basic Example

    import React, { Component } from 'react';
    import PullToRefresh from 'rmc-pull-updown-to-refresh';
 
    export default class YouComponet extends Component {
        onPullDown = () =>
            new Promise((res, rej) => {
            window.clearTimeout(this.time1);
            this.time1 = setTimeout(() => {
                this.setState(
                {
                    listleft: ['暂无数据'],
                },
                () => rej('接口请求失败'),
                );
            }, 3000);
            });
 
        onPullUp = () =>
            new Promise((res, rej) => {
            window.clearTimeout(this.time2);
            this.time2 = setTimeout(() => {
                rej('没有更多了！');
            }, 3000);
            });
        ...
        render () {
            return (
                <div>
                    <PullToRefresh
                        className={s.bg_orange}
                        onPullDown={this.onPullDown}
                        disablePullUp={false}
                        disablePullDown={false}
                        pullDownText="左下拉更新"
                        pullUpText="左上拉更新"
                        onPullUp={this.onPullUp}
                        loadBackground="#eee"
                        loadTextColor="#999"
                        loadIcon={loadheart}
                        pullIcon={rocket}
                    >
                        <ul>
                            <li>...youlist</li>
                            <li>...youlist</li>
                            <li>...youlist</li>
                            ...
                        </ul>
                    </PullToRefresh>
        }
    }
 

API

  • ### onPullDown: () => Promise
    下拉事件
    onPullDown = () => new Promise((resove, reject) => {
        if (resove) {
            resove()
        }
        if (reject) {
            reject()
        }
    })
    <PullToRefresh
        onPullDown={this.onPullDown}
    >
    </PullToRefresh>
  • ### onPullUp: () => Promise
    上拉事件
    onPullUp = () => new Promise((resove, reject) => {
        if (resove) {
            resove()
        }
        if (reject) {
            reject()
        }
    })
    <PullToRefresh
        onPullUp={this.onPullUp}
    >
    </PullToRefresh>
  • ### disablePullUp: boolean
    禁用上拉事件
    <PullToRefresh
        disablePullUp
    >
    </PullToRefresh>
  • ### disablePullDown: boolean
    禁用下拉事件
    <PullToRefresh
        disablePullDown
    >
    </PullToRefresh>
  • ### pullDownText: string
    下拉状态提示文案
    <PullToRefresh
        pullDownText="pullDownText"
    >
    </PullToRefresh>
  • ### pullUpText: string
    上拉状态提示文案
    <PullToRefresh
        pullUpText="pullUpText"
    >
    </PullToRefresh>
  • ### loadBackground: string 下拉状态条背景色
    <PullToRefresh
        loadBackground="#eee"
    >
    </PullToRefresh>
  • ### loadTextColor: string 下拉状态条文字颜色
    <PullToRefresh
        loadTextColor="#999"
        >
    </PullToRefresh>
  • ### loadIcon: string 下拉条loading图标
    import loadheart from'./../PullToRefresh/loadingheart.svg';
    <PullToRefresh
        loadIcon={loadheart}
    >
    </PullToRefresh>
  • ### loadIcon: string 下拉条下拉图标
    import rocket from './../PullToRefresh/rocket.png';
    <PullToRefresh
        pullIcon={rocket}
    >
    </PullToRefresh>

Event flow

Demo


手机扫码体验

Readme

Keywords

Package Sidebar

Install

npm i rmc-pull-updown-to-refresh-time

Repository

github.com/eightfeet/rmc-pull-updown-to-refresh

Homepage

github.com/eightfeet/rmc-pull-updown-to-refresh/blob/master/README.md

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

1.99 MB

Total Files

23

Last publish

Collaborators

  • bearbearbearbear
Try on RunKit
Report malware