umi antd实现上拉刷新下拉加载

将umi 中的@umijs/preset-react升级到2版本

新建主页面index.tsx

import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List,PullToRefresh } from 'antd-mobile'
import { mockRequest } from './mock-request'
import axios from 'axios'
import { sleep } from 'antd-mobile/es/utils/sleep'
export default () => {
  useEffect(() => {
    datalist()
  }, [])
  //获取首次渲染的数据
  function datalist() {
    axios.get('/api/list').then(val => {
      setData(val.data.data)
    })
  }
  //首次展示的数据
  const [data, setData] = useState<string[]>([])
  const [hasMore, setHasMore] = useState(true)
  //下拉刷新后要展示的数据
  async function loadMore() {
    const append = await mockRequest()
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }

  return (
    <>
    {/** 下拉刷新操作**/}
     <PullToRefresh
      onRefresh={async () => {
        await sleep(1000)
        const append = await mockRequest()
        setData(val => [ ...append,...val])
      }}
    >
      {/* 数据展示 */}
       <List>
        {data.map((item, index) => (
          <List.Item key={index}>
            <div style={{height:'200px'}}>
            {item.name}
            </div>
          </List.Item>
        ))}
      </List>
    </PullToRefresh>
     {/* 上拉刷新操作 */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </>
  )
}

同级目录建文件mock-request.tsx文件

import { sleep } from 'antd-mobile/es/utils/sleep'


let count = 1
import  axios from 'axios' 
export async function mockRequest() {
  count++
  await sleep(2000)
//   获取每次更新的数据
    let {data:{data}} = await axios.get('/api/list?page='+count)
    return data
}

node后端配置每次请求的数据

var express = require('express');
var router = express.Router();
var {goodModile} = require('../modul/modul')


router.get('/list',async(req,res)=>{
  // 当前页   默认为1
  let page = req.query.page||1
// 每页多少条数据
  let pageSize = 5
  let data = await goodModile.find().limit(pageSize).skip((page-1)*pageSize)
  res.send({
    code:200,
    data,

  })
})
module.exports = router;