miniapp-v2/src/components/List/index.jsx

import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
import Spin3 from '@/components/Spin/Spin3';
import { ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { random } from '@/utils';

export default React.forwardRef((props, ref) => {
  const {
    render,
    request,
    params = {},
    pageSize = 10,
    onError,
    onDataChange,
    noData,
    className,
    refres,//刷新复位
    refresherEnabled,
    ...leftProps
  } = props

  const [loading, setLoading] = useState(false)
  const contextRef = useRef()
  const [forceUpdate, setForceUpdate] = useState(0)
  const [list, setList] = useState([])
  const pageRef = useRef({ current: 1 })
  const [hasMore, setHasMore] = useState(false)

  const uqCls = useMemo(() => random('f'), [])

  // 滚动
  const handleScrollToLower = (e) => {
    if (!loading && hasMore) {
      pageRef.current.current += 1
      setForceUpdate(forceUpdate + 1)
    }
  }

  const loadingOff = () => {
    refres()
  }

  const fetchList = () => {
    if (!request) return;

    setLoading(true)
    request({
      ...params,
      pageSize,
      pageNum: pageRef.current.current
    }).then((res) => {
      const { records, ...pageInfo } = res || {}
      const lst = pageInfo.current === 1 ? records || [] : list.concat(records || [])
      setList(lst)
      setHasMore(pageInfo.current < pageInfo.pages)

      if (onDataChange) {
        onDataChange(lst, { paramsChanged: pageInfo.current === 1 })
      }

      pageRef.current = pageInfo
      setLoading(false)

    }).catch((err) => {
      console.error(err)
      setLoading(false)

      if (onError) {
        onError(err)
      }
    })
  }


  const fetchRef = useRef()
  fetchRef.current = fetchList

  useEffect(() => {
    pageRef.current.current = 1
    setHasMore(false)
  }, [params])

  // 请求数据
  useEffect(() => {
    fetchRef.current()
  }, [params, forceUpdate])

  useEffect(() => {
    Taro.nextTick(() => {
      Taro.createSelectorQuery().select(`.${uqCls}`).node(function (res) {
        contextRef.current = res.node
      }).exec()
    })
  }, [])

  // https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ScrollViewContext.html
  // ScrollViewContext 透传给父组件
  //https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle
  useImperativeHandle(ref, () => ({
    context: contextRef.current,
  }))


  return (
    <ScrollView
      {...leftProps}
      scrollY
      enhanced
      refresherEnabled={refresherEnabled}

      onRefresherrefresh={fetchRef.current = fetchList}
      onScrollToLower={handleScrollToLower}
      className={`${className} ${uqCls} list-view`}
    >
      <view>
        {!render
          ? props.children
          : list.map((item, index) => render({ item, index }))
        }
        {!list || !list.length && noData}

        <Spin3 show={loading} />

        {list && list.length > 0 && !hasMore &&
          <view className='botton'>这是我的底线</view>
        }
      </view>
    </ScrollView>
  )
})