react 使用 antd-mobile组件库实现下滑加载数据

在许多的应用场景中都会存在的功能点，在商品列表展示时，所展示的仅仅是一部分数据，并非是完全展示，在存在大量数据时展示的所有的会导致页面渲染缓慢的问题，所以都是通过功能触发，增加更多的数据展示 

第一步： 

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>