react 使用京东组件库实现触底加载加载

1。安装组件库 

npm i @nutui/nutui-react

 2.引入触底加载组件

import { Cell, Infiniteloading } from '@nutui/nutui-react';

3.请求数据 来当作触底加载的内容

  let [list, setlist]: any = useState([])
 useEffect(() => {
        const stores: any = store.getState()
        if (stores.user.user.token) {
            getshow(true)
        }
        getTypeOneList({ parent_name: '鞋类' }).then((res: any) => {
            // setlist(res.res)
            let a = res.res
            list.splice(0)
            a.forEach((element: any) => {
                //   setlist((list: any) => [...list, element])
                list.push(element)
            });
            setlist([...list])
        })

    }, [])

4.初始化组件

//滚动加载
    const [defultList, setDefultList] = useState<string[]>([])
    const [hasMore, setHasMore] = useState(true)

    useEffect(() => {
        if (list.length > 0) {

            init();
        }
    }, [list])

    const loadMore = (done: () => void) => {
        // console.log(list)
        if (list.length > 0) {

            setTimeout(() => {
                const curLen = defultList.length
// 每次加载10条 可以根据需求自行修改
                for (let i = curLen; i < curLen + 10; i++) {
                    if (i < list.length) {

                        defultList.push(list[i])
                    }
                }
                if (defultList.length >= list.length - 1) {
                    setHasMore(false)
                } else {
                    setDefultList([...defultList])
                }
                done()
            }, 500)
        }

    }

    const init = () => {


        // console.log(list[0])

        for (let i = 0; i < 10; i++) {
            if (i < list.length) {

                defultList.push(list[i])
            }
            if (defultList.length >= list.length - 1) {
                setHasMore(false)
            } else {
                setDefultList([...defultList])
            }

            // console.log(defultList)
        }
        setDefultList([...defultList])

        // console.log(defultList)
    }

5.渲染页面

 <div className={Style.Shoping}>
                    <p>| 为你优选</p>
                    <ul id="scroll" style={InfiniteUlStyle}>
                        <Infiniteloading
                            containerId="scroll"
                            useWindow={true}
                            useCapture={true}
                            hasMore={hasMore}
                            threshold={200}
                            onLoadMore={loadMore}
                            pullIcon={" "}
                            pullTxt=' '
                            loadIcon={' '}

                        >
                            {defultList.map((item: any, i: any) => {
                                return (
                                    <li key={i} onClick={() => details(item.id)}>
                                        <div>
                                      
                                          
                                                <img src={item.img} alt="Real Image" />
                                       
                                        </div>


                                        <div className={Style.shopli}><p>{item.title}</p></div>
                                        <div className={Style.shopli}>
                                            <div>
                                                <span style={{ color: 'red' }}>￥{item.price} </span>
                                                <span style={{ color: '#b0b0b0', textDecoration: "line-through" }}>￥{item.special_price}</span>
                                            </div>
                                            <span>  <More></More> </span>
                                        </div>
                                    </li>
                                )

                            })}
                        </Infiniteloading>
                    </ul>

                </div>

以上是使用京东组件库触底加载步骤，如果对你有帮组请点赞