react ts实现一个 无限加载组件

页面滑动到底部，直接加载下一页数据

• InfiniteScroll.tsx

/**
 * 无限 加载组件
 */

import { FC, createRef, useEffect, CSSProperties } from 'react'
import LoadingText from '../LoadingText'

type PropsType = {
  loadMore: () => void
  hasMore: boolean
}

const InfiniteScroll: FC = (props: PropsType) => {
  const { loadMore, hasMore } = props
  // const [loading, setLoading] = useState(hasMore)
  const ref = createRef()
  // console.log('InfiniteScroll', hasMore)

  useEffect(() => {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // setLoading(false)
          loadMore()
        }
      })
    })
    // console.log('ref.current', ref.current)

    if (ref.current) {
      observer.observe(ref.current)
    }
  }, [])

  const defaultStyle: CSSProperties = {
    padding: '0 0 0.6rem 0'
  }

  return (
    

      {hasMore ? (
        
      ) : (
        
          
{
              ...defaultStyle,
              textAlign: 'center',
              fontSize: '0.28rem',
              color: '#999'
            }}
          >
            --- 我是有底线的 ---
          
        
      )}
    
  )
}

export default InfiniteScroll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

• 用法

....


  async function loadMore() {
    // 加载下一页数据
  }

// hasMore  是 判断是否还有数据状态

1
2
3
4
5
6
7
8
9