前端代码
import React, { useState, useEffect } from 'react'
import { List, Cell } from 'react-vant'
import axios from 'axios'
export default function App() {
const [len, setLen] = useState(20); // 数据条数
const [list, setList] = useState([]); // 数据列表
const [finished, setFinished] = useState(false); // 加载状态
/* 首次加载 */
useEffect(() => { getData() }, [])
/* 滚动条与底部距离小于 offset 时触发 */
const onLoad = async () => {
// 延迟执行
await new Promise(resolve => setTimeout(resolve, 500));
getData();
}
/* 请求数据 */
const getData = async () => {
let { data: { code, data: { arr, flag } } } = await axios.get('http://127.0.0.1:3000/?len=' + len)
if (code === 200) {
setList(arr);
setFinished(!flag);
flag && setLen(len + 5)
}
}
return (
<List
finished={finished}
onLoad={onLoad}
loadingText='来喽来喽!'
finishedText='被你追到了,555!'>
{
list.map((_, i) => (
<Cell key={i} title={'单元格' + eval(_ + 1)} />
))
}
</List>
)
}
后端代码
router.get('/', (req, res) => {
let arr = Array.from({ length: 40 }, (_, i) => i) //生成长度40的数组
let len = req.query.len || 5; //请求条数
let total = arr.length; //总条数
arr = arr.slice(0, len) //数组处理
if (total > len) { //如果总长度大于请求长度,返回还可以继续加载的信号
res.send({
code: 200,
msg: '请求成功',
data: {
arr, flag: true
}
})
} else { //否则终止加载
res.send({
code: 200,
msg: '请求成功',
data: {
arr, flag: false
}
})
}
});