react H5 上拉加载更多
组件库:ant-mobile
组件:无限滚动组件+空状态
代码如下,把滚动和空状态封装到了一起,下次要用可以直接调用
封装
import React, { memo } from "react";
import { InfiniteScroll, Empty } from "antd-mobile";
export default memo(({ loadMore, hasMore, List, renderItem }) => {//父传子
return (
<>
{(List || []).map((item, index) => {
{/**renderItem就是要渲染的内容,可以写成任何需要的样式*/}
return renderItem ? renderItem(item, index) : "";
})}
{/**无限滚动 */}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
{/**空状态 */}
{List.length <= 0 && (
<Empty
style={{ padding: "90% 0" }}
imageStyle={{ width: 128 }}
description="暂无数据"
/>
)}
</>
);
});
调用
import ScrollList from "../components/scrollList";//引入匿名暴露的组件,名字可以随便取
import { sleep } from "antd-mobile/es/utils/sleep";//这个应该是加载时间
export default memo(() => {
const [List, setList] = useState([]);//列表数据源
const [currentPage, setcurrentPage] = useState(1);//当前页
const [pageSize, setPageSize] = useState(10);//每页条数
const [hasMore, setHasMore] = useState(true);//初始状态为true,用户滚动到底部时会自动调用loadMore函数,相当于滚动一次,请求一次数据,控制loadMore是否调用的标识
const loadMore = async () => {
const {state,list, pagination} = await ListGet({currentPage,pageSize})//在loadMore中请求数据
if (state === 200) {
const append = list ?? [];
setDataList((val) => [...val, ...append]);//因为是上拉加载,所以需要在前一次的列表上合并下一次请求到的列表
setCurrent((currentPage) => currentPage+ 1);//下次请求时页数+1
if (currentPage=== pagination.totalPage) {
setHasMore(false);//当前页数和返回数据的总页数相同是,不在有更多内容,不在继续调用loadMore函数
}
await sleep(2000);
}
};
const renderItem = (item, index) => {//渲染的内容
return (
<div key={index}>
<div>
<div>{item.xxx}</div>
<div>{item.xxx}</div>
</div>
</div>
);
};
return (
<>
<div className={styles.listWrap}>
<ScrollList
loadMore={loadMore}//加载更多回调函数
hasMore={hasMore}//是否还有更多内容
List={List}//列表数据源
renderItem={renderItem}//要渲染的内容,就是list经过map后的item
/>
</div>
</>
);
});