React+Antd 实现数据的触底加载(koa2后端数据)
效果
触底加载效果
用到了 antd-mobile第三方库中的InfiniteScroll 无限滚动
安装第三方库:
yarn add antd-mobile
npm i antd-mobile
后端接口,使用的node koa2框架:
router.get('/list', async (req, res) => {
let len = req.query.len //接收数组的长度
data = await swiperModel.find().limit(len) //使用limit进行截取
let lens = (await swiperModel.find()).length //所有的数据条数
if (lens > len) { //如果所有数据条数大于想要的数据条数 说明还可以进行加载数据
res.send({
status: 200,
msg: '获取成功',
data,
hasMore: true //为true的时候说明还可以在加载数据
}
)
} else { //想要的数据条数 大于总数据数据条数了 不能进行触底加载了
res.send({
status: 200,
msg: '获取成功',
data,
hasMore: false //不能在进行触底加载了
})
}
})
前端react框架
import React, { useEffect, useState } from 'react'
import { InfiniteScroll } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from '../../server/request'
import './style.css'
export default function Loading() {
const [data, setDate] = useState([]) //数据
const [len, setlen] = useState(6) //数据条数
const [hasMore, setHasMore] = useState(true);
function getList() {
axios.get(`/list?len=${len}`).then(res => {
console.log(res, '55555');
if (res.hasMore === true) { //如果为true,说明还能继续加载数据
setlen(len + 5) //加五条数据
}
setHasMore(res.hasMore) //修改是否加载状态
setDate(res.data)
})
}
async function loadMore() {
await sleep(2000) //等待两秒
getList() //请求数据
}
useEffect(() => {
getList() //初始数据
}, [])
return (
<div className='loading'>
<div id="page-top" />
<div className='box'>
{
data.map(item => (
<div className='item' key={item._id}>
<img src={item.pic} alt="" />
<p className='title'>{item.title}</p>
<p className='price'>¥{item.price}</p>
</div>
))
}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</div>
</div>
)
}