先看效果:
安装第三方库:
$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
后端接口,我是使用的node koa2框架:
router.get("/getcart", async (ctx, next) => {
let len = ctx.request.query.len //接收数组长度
let data = await cartmodel.find().limit(len) //limit进行截取
let lengs = (await cartmodel.find()).length //所有数据条数
if (lengs > len) { //如果所有数据条数大于 想要的数据条数 说明你还可以再进行加载数据
ctx.body = {
code: 200,
msg: "获取成功",
data,
hasmore: true //为true你还可以再加载数据
}
} else { //想要的数据条数 大于总数据数据条数了 不能进行触底加载了
ctx.body = {
code: 200,
msg: "获取成功",
data,
hasmore: false //不能在进行触底加载了
}
}
})
前端:
首次请求接口渲染5条
后端返回true,将数据条数加5,
触底触发函数,再次请求接口,这时候得到的是10条数据
依次循环直到后端返回false 数据请求完了。
代码:
import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from 'axios'
export default function Cart() {
const [arr, setarr] = useState([]) //数据
const [len, setlen] = useState(5) //数据条数
const [hasMore, setHasMore] = useState(true);
function jiekou() {
axios.get(`http://localhost:3001/getcart?len=${len}`).then(({ data }) => {
console.log(data);
if (data.hasmore === true) { //如果为true,说明还能继续加载数据
setlen(len + 5) //加五条数据
}
setHasMore(data.hasmore) //修改是否加载状态
setarr(data.data)
})
}
async function loadMore() {
await sleep(2000) //等待两秒
jiekou() //请求数据
}
useEffect(() => {
jiekou() //初始数据
}, [])
return (
<div className='cartBOX'>
{
arr.map(item => (
<div className='cartboxhe' key={item._id}>
<img src={item.pic} alt="" />
<p>{item.title}</p>
</div>
))
}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</div>
)
}