react-awesome-infinite-scroll v0.1.10

react-awesome-infinite-scroll

English | 中文说明

Introduction?

Scroll load list, relying on the browser scroll to load, it's easy to loading list by scroll.

featrues

• Automatically gets the scroll parent by default, or set scrollableParent manually
• Both internal and external scrolling of the component can be triggered，The scrolling behavior on the outside can be triggered by setting 'scrollableParent', and the scrolling on the inside can be triggered by setting 'height'
• Controls the loading by hashMore, Controls the refreshing by isRefreshing,
• Support pull - up load, pull - down refresh and reverse pull - up refresh, pull - down load behavior(Chat box scene), custom component load dynamic display and behavior

Matters

When the scrolling parent element of multiple lists on the page is the same, it is impossible to distinguish which list is currently scrolling, so forbidTrigger is needed to prohibit the scrolling loading behavior of non-current lists.

install

npm install --react-awesome-infinite-scroll
# or
yarn add react-awesome-infinite-scroll

example

import InfiniteScroll from 'react-awesome-infinite-scroll';

const total = 150;
    const [list, setList] = useState([]);
    const [hasMore, setHasMore] = useState<boolean>();
    const [isRefreshing, setIsRefreshing] = useState<boolean>();

    useEffect(() => {
        const res = Array.from({ length: 100 })
        setList(res);
        setHasMore(res?.length < total);
    }, [])

    // loading more
    const fetchMoreData = () => {
        setTimeout(() => {
            const next = list?.concat(Array.from({ length: 20 }))
            setList(next);
            if (next?.length > 160) {
                setHasMore(false)
            }
        }, 1000);
    };

    const reload = () => {
        setIsRefreshing(true)
        setTimeout(() => {
            const res = Array.from({ length: 100 })
            setList(res);
            setIsRefreshing(false)
        }, 1000);
    }

    const renderItem = (_, index: number) => {
        return (
            <div style={{ height: 30, border: '1px solid green', margin: 6, padding: 8 }} key={index} >
                div - #{index}{_}
            </div>
        );
    }
......

<div className="parent" style={{height: "500px", overflow: "auto"}}> // 目前设置的外部滚动
    <InfiniteScroll
        length={list?.length}
        next={fetchMoreData}
        scrollableParent={document.querySelector(".cart-index")}
        hasMore={hasMore}
        isRefreshing={isRefreshing}
        pullDownToRefresh
        refreshFunction={reload}
        pullDownComponent={<div style={{ height: "50px", background: "green" }}>下拉</div>}
        releaseComponent={<div style={{ height: "50px", background: "red" }}>释放</div>}
        refreshingComponent={<div style={{ height: "50px", background: "green" }}>加载中</div>}
        refreshEndComponent={<div style={{ height: "50px", background: "red" }}>加载完成</div>}
        loadingComponent={<div style={{ textAlign: 'center' }}><h4>Loading...</h4></div>}
        endComponent={
            (list?.length) ?
                <div style={{ textAlign: 'center', fontWeight: 'normal', color: '#999' }}>
                    <span>没有更多内容了</span>
                </div> : null
        }
        >
            {
                list?.map((item, index) => {
                    return renderItem(item, index);
                })
            }
    </InfiniteScroll>
</div>

Methods

   setScroll: (x, y) => void: Set the scroll distance of the scroll root node, when set `inverse` the initialization will scroll to the bottom.

Attributes