用到了 antd-mobile第三方库中的InfiniteScroll 无限滚动
安装第三方库:
yarn add antd-mobile
npm i antd-mobile
后端接口,使用的node koa2框架:
var express = require('express');
var router = express.Router();
const { chudiModel } = require('../db/model')
/* GET home page. */
router.get('/list', async (req, res) => {
let len = req.query.len //接收数组的长度
data = await chudiModel.find().limit(len) //使用limit进行截取
let lens = (await chudiModel.find()).length //所有数据的条数
if (lens > len) { //如果所有数据条数大于想要的数据条数 说明还可以进行加载数据
res.send({
msg: "成功",
data,
hasMore: true, //为true的时候说明还可以在加载数据
})
} else {
res.send({
msg: "成功",
data,
hasMore: false
})
}
});
module.exports = router;
前端react框架
import { useEffect, useState } from 'react';
import './index.css';
import axios from 'axios';
import { InfiniteScroll } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep'
export default function IndexPage() {
const [data, setdata] = useState([]) //数据
const [len, setlen] = useState(8) //数据条数
const [hasMore, setHasMore] = useState(false)
const getdata = async () => {
let data = await axios.get('http://localhost:3000/list?len=' + len)
setHasMore(data.data.hasMore)
setdata(data.data.data)
if (data.data.hasMore == true) {
setlen(len + 5)
}
}
async function loadMore() {
await sleep(2000) //等待两秒
getdata() //请求数据
}
useEffect(() => {
getdata() //初始化数据
}, [])
return (
<div>
<div className='top'>
<ul>
<li>鞋子</li>
<li>衣服</li>
<li>家具用品</li>
<li>电器</li>
<li>电饭煲</li>
<li>更多</li>
</ul>
</div>
<div className='content'>
{
data.map(item => (
<div className='box' key={item._id}>
<img src='./1.png' alt="" className='img' />
<div className='zi'>{item.title}</div>
</div>
))
}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</div>
</div>
);
}