H5上拉加载

好久没记笔记了，最近又做了h5的开发，使用了 antd-mobile 的 PullToRefresh 拉动刷新，但是毛病很多，最后还是决定自己封装。

踩坑

原理和之前做的下拉刷新一样，只是拉动的方向不一样，上拉加载需要判断滚动条处于底部位置，这个地方也有坑。

1、正常情况下我们认为 scrollHeight - scrollTop - clientHeight === 0 则判断滚动条处于底部位置，但是真机测试发现这个数值不为零，而是0.xxx，所以我使用了5，我估计这也是 antd-mobile 的 PullToRefresh 失效的原因。

2、对于全局滚动条的判断就更夸张了，在三星手机上 scrollHeight - scrollTop - clientHeight 大概是55.xxx，所以全局位置的判断我用了一个更大的值 100。

废话不多说，上代码

1、index.tsx

/**
 * 上拉加载组件
 * 
 * lvxh
 */
import { CSSProperties, useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.less'
import { geiComtainer } from './utils'
import { useCalculateHeight } from './useCalculateHeight'
import { useTouchHandle } from './useTouchHandle'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode // 子元素
  loadMore: (page: number) => Promise<any> // 上拉加载函数，会传page参数，需要返回一个 Promise 以更新加载提示
  pageSize?: number // pageSize
  initPage?: number // 初始page，默认1
  total?: number // 分页里的总数据，传入可以在加载完所有数据就停止加载并给出提示，不传会一直加载
  fixedHeight?: boolean // 是否不改变滚动元素高度，不改变的话 height = 窗口高度，不传 height = 窗口高度 - 列表距离顶部高度
  resetPage?: boolean | string // 是否重置 page，一个页面多个列表共用一个下拉刷新时重置状态，传入列表唯一的key即可
  docIsBottom?: boolean // 是否监听 html 的滚动条也到底部才触发更新，默认为 true
  height?: number | string // 支持自己配置height，不传值则使用 useCalculateHeight 计算出的height
  distanceToRefresh?: number // 刷新距离，默认值 20
  damping?: number // 拉动距离限制, 建议小于 200 默认值 100
  textStyle?: CSSProperties // 底部提示语样式
}

export default ({ 
  children, 
  loadMore, 
  pageSize = 10, 
  initPage = 1, 
  total, 
  fixedHeight, 
  resetPage, 
  docIsBottom = true,
  height,
  distanceToRefresh = 20,
  damping = 100,
  textStyle
}: Props) => {
  const [show, setShow] = useState(false) // 提示元素隐藏
  const [text, setText] = useState('') // 提示信息
  const pageRef = useRef<number>(initPage)
  const totalRef = useRef<any>(total) // 执行加载标志
  const pageSizeRef = useRef<number>(pageSize)
  const [_height] = useCalculateHeight({ fixedHeight })

  useEffect(() => {
    if (total) totalRef.current = total
  }, [total])
  
  useEffect(() => {
    if (pageSize) pageSizeRef.current = pageSize
  }, [pageSize])

  useEffect(() => {
    if (resetPage) pageRef.current = initPage
  }, [resetPage, initPage])

  // 加载函数，每次 page加1，并且loadMore需返回一个Promies
  const loadMoreHandle = useCallback(async () => {
    pageRef.current++
    if (typeof loadMore === 'function') {
      await loadMore(pageRef.current)
      setShow(false)
      setText('')
      const container: any = geiComtainer()
      if (container) {
        // 加载完滚动条上移30，让用户看到新加载的数据
        container.scrollTop = container?.scrollTop + 30
      }
    }
  }, [loadMore])

  const [touchstart, touchmove, touchend] = useTouchHandle({ 
    totalRef, 
    pageRef,
    pageSizeRef,
    docIsBottom, 
    distanceToRefresh,
    damping,
    setText, 
    setShow, 
    loadMoreHandle 
  })

  const init = useCallback(() => {
    const container: any = geiComtainer()
    container?.addEventListener('touchstart', touchstart, false)
    container?.addEventListener('touchmove', touchmove, false)
    container?.addEventListener('touchend', touchend, false)
  }, [touchstart, touchmove, touchend])

  const remove = useCallback(() => {
    const container: any = geiComtainer()
    container?.removeEventListener('touchstart', touchstart, false)
    container?.removeEventListener('touchmove', touchmove, false)
    container?.removeEventListener('touchend', touchend, false)
  }, [touchstart, touchmove, touchend])

  useEffect(() => {
    const timer = setTimeout(() => {
      init()
    }, 0);
    () => {
      remove()
      clearTimeout(timer)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div className={styles['load-more']} >
      <div id="load-more-Container" className={styles['load-more-Container']} style={{ height: height ? height : _height }}>
        {children}
      </div>
      {show && <p className={styles['load-more-text']} style={textStyle}>{text}</p>}
    </div>
  )
}

2、useTouchHandle.ts

import { useCallback, useRef } from 'react'
import { geiComtainer, getScrollIsBottom } from './utils'

let _startPos: any = 0,
  _startX: any = 0,
  _transitionWidth: any = 0,
  _transitionHeight: any = 0

export const useTouchHandle = ({ 
  totalRef, 
  pageSizeRef, 
  pageRef,
  setText, 
  setShow, 
  loadMoreHandle, 
  docIsBottom,
  damping,
  distanceToRefresh 
}: any) => {
  const flageRef = useRef<boolean>(false) // 执行加载标志

  // 手势起点，获取初始位置，初始化加载标志
  const touchstart = useCallback((e: any) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    _startPos = e.touches[0].pageY
    // eslint-disable-next-line react-hooks/exhaustive-deps
    _startX = e.touches[0].pageX
    flageRef.current = false
  }, [])
  
  // 手势移动，计算滚动条位置、移动距离，判断在滚动条到达底部切移动距离大于30，设置加载标志为true，显示提示信息
  const touchmove = useCallback((e: any) => {
    if (_transitionWidth === 0) { // 阻止其频繁变动，保证能进入【上拉加载】就能继续【释放加载更多】
      // eslint-disable-next-line react-hooks/exhaustive-deps
      _transitionWidth = Math.abs(e.touches[0].pageX - _startX) // 防止横向滑动
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    _transitionHeight = _startPos - e.touches[0].pageY

    if (getScrollIsBottom(docIsBottom) && _transitionWidth < 10 && _transitionHeight > 0 && _transitionHeight < damping) {
      const container: any = geiComtainer()
      container.style.transition = 'transform 0s'
      container.style.transform = `translateY(-${_transitionHeight}px)`
      if (totalRef.current < pageSizeRef.current * pageRef.current) {
        setText('没有更多数据了')
        setShow(true)
        flageRef.current = false
      } else {
        setText('上拉加载')
        setShow(true)
        if (_transitionHeight > distanceToRefresh) {
          flageRef.current = true
          setText('释放加载数据')
          _transitionHeight = 0
        }
      }
    }
  }, [pageSizeRef, pageRef, setShow, setText, totalRef, docIsBottom, distanceToRefresh, damping])

  // 判断加载标志flage，执行加载函数
  const touchend = useCallback(() => {
    const container: any = geiComtainer()
    container.style.transition = 'transform 0.5s'
    container.style.transform = 'translateY(0)'

    if (flageRef.current) {
      setText('加载中...')
      loadMoreHandle()
    } else {
      setShow(false)
      setText('')
    }
  }, [loadMoreHandle, setShow, setText])

  return [touchstart, touchmove, touchend]
}

3、utils.ts

export const geiComtainer = () => {
  return document.getElementById('load-more-Container')
}

const isBottom = (dom: any, min = 5) => {
  return (dom?.scrollHeight || 0) - (dom?.scrollTop || 0) - (dom?.clientHeight || 0) < min // 滚动条到底部位置
}

export const getScrollIsBottom = (docIsBottom?: boolean) => { 
  return docIsBottom ? (isBottom(document.documentElement, 100) || isBottom(document.body, 100)) && isBottom(geiComtainer()) : isBottom(geiComtainer())
}

4、useCalculateHeight.ts

/**
 * 计算元素高度
 */
import { useCallback, useEffect, useState } from 'react'
import { geiComtainer } from './utils'

interface Props {
  fixedHeight?: boolean // 是否不改变滚动元素高度，不改变的话 height = 窗口高度，不传 height = 窗口高度 - 列表距离顶部高度
}
export const useCalculateHeight = ({ fixedHeight }: Props) => {
  const [height, setHeight] = useState<string | number>(0)

  // 计算滚动元素初始高度
  const calculateHeight = useCallback(() => {
    if (fixedHeight) {
      setHeight('100vh')
      return 
    }
    const initHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    // eslint-disable-next-line react/no-find-dom-node
    const offsetTop = geiComtainer()?.offsetTop || 0
    let _height = initHeight - offsetTop
    if (_height < initHeight * 0.66) _height = initHeight * 0.66 // 最小三分之二
    setHeight(_height)
  }, [fixedHeight])

  // 计算滚动元素最终高度，在数据少的时候根据子级元素高度，设置滚动元素高度
  useEffect(() => {
    const timer = setTimeout(() => {
      calculateHeight()
    }, 0);
    () => clearTimeout(timer) 
  }, [calculateHeight])

  return [height]
}

5、index.module.less

.load-more {
  overflow: hidden;

  .load-more-Container {
    overflow-y: auto;
    position: relative;
  }
  
  .load-more-text {
    position: fixed;
    bottom: 2rem;
    z-index: 10;
    width: 100%;
    padding-bottom: 0.2rem;
    font-size: 0.32rem;
    text-align: center;
  }
}