react触底加载

react触底加载（组件）

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、安装移动端组件（如是umi,不用下载，按需引入即可）

$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
# or
$ pnpm add antd-mobile

二、使用步骤

1.找到无限滚动

复制改图js代码

2.数据处理

后端数据：

router.get('/list', async (req, res) => {
  let len = req.query.len
  data = await bookModel.find().limit(len)
  let lens = (await bookModel.find()).length
  if(lens>len){
    res.send({status: 200, msg: '获取成功', data,hasMore:true})
  }else{
     res.send({
    status: 200, msg: '获取成功', data,hasMore:false
  })
  }
 
})

3.前端请求

  const getbook = () => {

    // 这里写接口
    request('http://localhost:3000/booklist', {
      method: 'get',
      params: {
        len: len
      }
    }).then(({ data, hasMore }) => {
      let list: any = []
      if (hasMore === true) {
        setLen(len + 5)
      }
      setHasMore(hasMore)
      data.map((item: any, index: any) => {
        list.push(item);
      })
      setData(list)
    });
  };
  useEffect(() => {
    getbook();
  }, []);

渲染

  
        {
          date.map((item, index) => (
            

              
              {item.title}


            
          ))}
      

三.前端完整代码

import React, { useState, useEffect } from 'react'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { request } from 'umi'

const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
  return (
    <>
      {hasMore ? (
        <>
          Loading
          
        
      ) : (
        --- 我是有底线的 ---
      )}
    
  )
}
export default () => {
  const [date, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  let [len, setLen] = useState(5)
  async function loadMore() {
    await sleep(2000)
    getbook()
  }


  const getbook = () => {

    // 这里写接口
    request('http://localhost:3000/booklist', {
      method: 'get',
      params: {
        len: len
      }
    }).then(({ data, hasMore }) => {
      let list: any = []
      if (hasMore === true) {
        setLen(len + 5)
      }
      setHasMore(hasMore)
      data.map((item: any, index: any) => {
        list.push(item);
      })
      setData(list)
    });
  };
  useEffect(() => {
    getbook();
  }, []);

  return (
    <>
      
        {
          date.map((item, index) => (
            

              
              {item.title}


            
          ))}
      
      

    
  )
}