搜索框下拉无限叠加刷新效果

最新推荐文章于 2024-08-20 22:10:40 发布

山下小飞鱼

最新推荐文章于 2024-08-20 22:10:40 发布

阅读量117

点赞数 1

文章标签：数学建模 javascript 开发语言

本文链接：https://blog.csdn.net/bossweiga/article/details/130979142

版权

该代码示例展示了如何在React应用中使用useEffect和useStatehook监听滚动事件，实现分页加载数据功能。同时，当数据正在加载时，通过AntDesign的Spin组件显示加载状态。页面中，数据从API获取并渲染到粉色背景的滚动区域。

摘要由CSDN通过智能技术生成

话不多说，原理只是获取ref=>添加current中的scroll事件，定义loading用来阻止在请求时还在下拉，并显示loading,以下是demo

import { useEffect, useState, useRef } from 'react';
import { Spin } from 'antd';
import 'jsmind/style/jsmind.css'
import api from "../api"
export default function MiaoshuList() {
    const [loading, setLoading] = useState(false)
    const loadingRef = useRef()
    loadingRef.current = loading
    const getRef = () => {
        const doms = testList.current;
        doms.addEventListener('scroll', loadMore)
    }
    const [pageNo, setPageNo] = useState(1)
    const [nowdata, setnoewdata] = useState([])
    //下拉触发事件
    const loadMore = (e) => {
        const { offsetHeight, scrollTop, scrollHeight } = e.target
        if (offsetHeight + scrollTop > scrollHeight - 1) {
            console.log(loadingRef, '下拉加载之前')
            if (loadingRef.current) return
            setPageNo((pageNo) => pageNo + 1)
        }
    }
    const getqueay = async (val) => {
        setLoading(true)
        let result = await api.test.getmd()
        if (pageNo > 1) {
            setnoewdata([...nowdata,...result.data])
        } else {
            setnoewdata(result.data)
        }
        setLoading(false)
    }
    const testList = useRef()
    useEffect(() => {
        getRef()
    }, [])
    useEffect(() => { getqueay() }, [pageNo])
    const [jms, setJm] = useState(null)//用来存储js获取不到的问题
    //放大
    return (
        <>
            <div>
                <div style={{ height: '300px', overflowY: 'scroll', backgroundColor: 'pink' }} ref={testList}>
                    {nowdata.map((item, index) => {
                        return (<div key={index}>{item.val2}</div>)
                    })}
                    <Spin loading={loading}/>
                </div>
            </div>
        </>
    )
}