html下拉加载更多,下拉加载更多的实现

1.四个属性

Data // 存储列表数据

hasMore // 是否还有更多数据，对应接口是否还有下一页的字段

isLoadingMore // 记录当前状态，用来展示'加载中...' 或 '加载更多'

page // 页码

List.tsx

const List: React.FC = () => {

const {state} = useContext(Context)

const [Data, setData] = useState([])

// 是否还有更多数据

const [hasMore, setHasMore] = useState(false)

// 记录当前状态，是加载中...，还是点击加载更多

const [isLoadingMore, setIsLoadingMore] = useState(false)

// 下一页的页码，首页的页码是0

const [page, setPage] = useState(0)

const resultHandle = (result: Promise) => {

result.then(res => {

return res.json()

}).then(json => {

const { data, hasMore } = json

setData(Data.concat(data))

setHasMore(hasMore)

})

}

const getPageData = () => {

const cityName = state.cityName

const result = getListData(cityName, page)

resultHandle(result)

}

const loadMoreData = () => {

setIsLoadingMore(true)

setPage(page => page + 1)

setIsLoadingMore(false)

}

useEffect(() => {

getPageData()

}, [])

useEffect(() => {

if (isLoadingMore) {

getPageData()

}

}, [page])

return (

{Data.length > 0 ? : '加载中...'}

// 如果还有下一页或者更多数据的情况下才显示加载更多

{hasMore ? :

)

}

LoadMore.tsx

interface Prop {

isLoadingMore: boolean;

loadMoreFn: () => void;

}

const LoadMore: React.FC = (props) => {

let timer: number | null = null

const loadRef = useRef(null)

const scrollBottomGetData = () => {

// 当前加载更多文字距可视窗口顶部的位置

const top = loadRef.current!.getBoundingClientRect().top

// 窗口的高度

const windowH = window.screen.height

// 如果小于窗口的高度，说明进入可视范围内了，也就是到底了

if (top && top < windowH) {

props.loadMoreFn()

}

}

const onScroll = () => {

if (props.isLoadingMore) {

return

}

if (timer) {

window.clearTimeout(timer)

}

timer = window.setTimeout(scrollBottomGetData, 500)

}

useEffect(() => {

document.addEventListener('scroll', onScroll)

return () => {

document.removeEventListener('scroll', onScroll)

}

}, [])

return (

{

props.isLoadingMore ? 加载中...

: 加载更多

}

)

}

export default LoadMore;