react触底加载

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

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

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现触底加载和依据

触底加载就是说，我们每次都要请求数据，然后每次都是请求几条数据，我们可以依据分页的原理来进行触底加载，有两种方式可以实现触底加载：1.可以在后端分页，然后请求数据，监听滚轮事件，判断是否到底。2.可以在前端分页，然后设置定时器，延迟请求数据，监听滚轮事件，判断是否到底，并且根据组件一起来达到触底加载的效果

二、使用步骤

1.引入库

代码如下（示例）：

import { InfiniteScroll } from 'antd-mobile'

2.获取数据和监听滚动事件

//获取数据和监听滚动事件
    useEffect(() => {
        getList()
        document.addEventListener('scroll', scrollEvent)
    }, [])

3.请求后端数据

代码如下（示例）：

	//设置每次更新的页数
    let [page, setPage] = useState(0)
    //获取数据的列表
    let [arr, setArr] = useState([])
    //判断是加载中还是没有更多了，true是加载中false是没有更多了
    const [hasMore, setHasMore] = useState(true)
    //请求后端接口
	 const getList = () => {
        axios.get('http://localhost:3000/').then(val => {
            setTimeout(() => {
                let tmp = arr
                //每次请求数据页数+1
                setPage(page++)
                //每次展示10条数据
                let pageSize = 10
                //进行分页每次请求数据不一样
                tmp.push(...val.data.data.slice((page - 1) * pageSize, page * pageSize))
                //判断最后的总条数是否大于总数据的条数
                if (page * pageSize <= val.data.data.length) {
                    setArr([...tmp])
                    setHasMore(true)
                } else {
                	//判断组件是加载中还是没有更多了
                    setHasMore(false)
                    return false
                }
            }, 2000);
        })
    }
   

4.判断是否触底

const scrollEvent = () => {
        let html = document.documentElement || document.body
        //html.scrollTop是滑轮距离顶部的距离，html.scrollHeight是滚动的高度，html.clientHeight是可视区域的高度，也可以使用别的判断方法，意思都差不多
        if (html.scrollTop >= html.scrollHeight - html.clientHeight) {
            getList()
        }
    }

5.组件需要的东西

 import React, { useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'

export default () => {
  const [data, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    const append = await mockRequest()
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }

  return (
    <>
      <List>
        {data.map((item, index) => (
          <List.Item key={index}>{item}</List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </>
  )
}

6.完整代码

import React, { useEffect, useState } from 'react'
import { Tabs, InfiniteScroll } from 'antd-mobile'
import axios from 'axios'
export default function App() {
  const [arr, setArr] = useState([])
  let [num, setNum] = useState(0)
  //请求后端接口
  function getArr() {
    axios.get('http://localhost:3000/').then(val => {
      setTimeout(() => {
        let tmp = arr
        let pageSize = 10
        setNum(num++)
        tmp.push(...val.data.data.slice((num - 1) * pageSize, num * pageSize))
        if (num*pageSize <= val.data.data.length) {
          setArr([...tmp])
          setHasMore(true)
        } else {
          setHasMore(false)
          return false
        }

      }, 2000);
    })
  }
	//请求数据和监听滚动事件
  useEffect(() => {
    getArr()
    document.addEventListener('scroll', scrollEvent)
  }, [])
  //滚动事件，判断是否到底
  const scrollEvent = () => {
    let html = document.documentElement || document.body
    if (html.scrollTop >= html.scrollHeight - html.clientHeight) {
      // console.log('到底了');
      getArr()
    }
  }
  //判断是加载中还是没有更多了，true为加载中，false为没有更多了
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {

  }
  return (
    <div style={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
      {
        arr.map(item => {
          return (
            <div style={{ width: '45%' }}>
              <div>
                <img src={item.pic} alt="" width='100%' />
              </div>
              <div>
                {item.title}
                {item.price}
              </div>
            </div>
          )
        })
      }
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了触底加载的使用