在许多的应用场景中都会存在的功能点，在商品列表展示时，所展示的仅仅是一部分数据，并非是完全展示，在存在大量数据时展示的所有的会导致页面渲染缓慢的问题，所以都是通过功能触发，增加更多的数据展示
第一步：
npm i antd-mobile //引入组件库
import { InfiniteScroll, List } from 'antd-mobile' import { sleep } from 'antd-mobile/es/utils/sleep'
使用InfiniteScroll组件，sleep实现计时效果
const [hasMore, setHasMore] = useState(true) //判断是否还有数据需要进行加载 const [sedlist, setSedlist] = useState([]) //数据集合 async function loadMore() { const append = await mockRequest() setSedlist(val => [...val, ...append]) setHasMore(append.length > 0) } const [count, setCount] = useState(0) async function mockRequest() { if (count >= 3) { return [] } var datas = [] axios.get("http://localhost:3010/shopedlist?keyname=" + knamed).then(data => { console.log('data.data.data.channels', data.data.data) // setToplisted([...data.data.data.channels]) datas = data.data.data.slice(count * 5, (count + 1) * 5) }) await sleep(1000) let num = count num++ setCount(num) return datas }
<div className='searedlist'> {sedlist.map(item => { return ( <div className='sitem' key={item._id} onClick={() => godetails(item)}> <div className='itimg'> <img src={item.simg[0]} /> </div> <div className='itcon'> <p>{item.sname}</p> <span>￥{item.price}</span> </div> </div> ) })} <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> </div>
