我正在使用Reactjs版本,而不是在Page上使用无穷大,我在div上使用它,不知道如何添加滚动事件。我知道这是一个有用的超链接,但我不会使用它。
Page
div
<div className="height-100 overflowY-scroll infinite-scroll-content"> ... </div>
neskvpey1#
给你使用onInfinite事件loadData函数获取数据并使用新项更新状态。onInfinite函数在用户滚动到页面底部时触发,它更新页码并调用loadData以加载更多数据。loading状态用于防止同时发出多个请求。
onInfinite
loadData
loading
import React, { useState, useEffect } from 'react'; import InfiniteScroll from 'framework7/components/infinite-scroll' const MyComponent = () => { const [page, setPage] = useState(1); const [items, setItems] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { loadData(); }, []); const loadData = async () => { setLoading(true); // fetch data here and update items setItems([...items, ...newItems]); setLoading(false); }; const onInfinite = async () => { if (loading) return; setPage(page + 1); loadData(); }; return ( <div className="height-100 overflowY-scroll infinite-scroll-content"> <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> {loading && <div className="infinite-scroll-preloader">Loading...</div>} <Framework7App.InfiniteScroll onInfinite={onInfinite} /> </div> ); }; export default MyComponent;
您可以通过修改<div className="infinite-scroll-preloader">Loading...</div>元素来定制预加载器文本。
<div className="infinite-scroll-preloader">Loading...</div>
1条答案
按热度按时间neskvpey1#
给你使用
onInfinite
事件loadData
函数获取数据并使用新项更新状态。onInfinite
函数在用户滚动到页面底部时触发,它更新页码并调用loadData
以加载更多数据。loading
状态用于防止同时发出多个请求。您可以通过修改
<div className="infinite-scroll-preloader">Loading...</div>
元素来定制预加载器文本。