feats

src/components/List/index.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import VirtualList from '@tarojs/components/virtual-list';
+import Taro from '@tarojs/taro';
+
+export default (props) => {
+  const {
+    className,
+    height,
+    width = '100%',
+    itemHeight = 100,
+    render,
+    request,
+    params,
+    pageSize = 10,
+    onError
+  } = props
+
+  const loadingRef = useRef(false)
+  const [payload, setPayload] = useState({})
+  const [list, setList] = useState([])
+  const pageRef = useRef({ current: 1, total: 0 })
+
+  const dataLen = list.length
+
+  // 滚动
+  const handleScroll = ({ scrollDirection, scrollOffset }) => {
+    const loading = loadingRef.current
+    const isUping = scrollDirection === 'forward'
+    const canScroll = scrollOffset > ((dataLen - 5) * itemHeight + 100)
+    const hasMore = pageRef.current.current < pageRef.current.total
+
+    if (!loading && isUping && canScroll && hasMore) {
+      setPayload({
+        ...payload,
+        pageNum: pageRef.current.current + 1
+      })
+    }
+  }
+
+  // 联动状态, 设置查询参数
+  useEffect(() => {
+    setPayload({
+      ...params,
+      pageNum: pageRef.current,
+      pageSize,
+    })
+  }, [pageSize, params])
+
+
+  // 请求数据
+  useEffect(() => {
+    Taro.showLoading()
+    loadingRef.current = true
+    request(payload).then((res) => {
+      const { records, ...pageInfo } = res || {}
+      setList(records || [])
+      pageRef.current = pageInfo
+      loadingRef.current = false
+      Taro.hideLoading()
+    }).catch((err) => {
+      loadingRef.current = false
+      console.error(err)
+      Taro.hideLoading()
+      if (onError) {
+        onError(err)
+      }
+    })
+  }, [payload])
+
+  const Row = useMemo(render, [])
+
+  return (
+    <VirtualList
+      className={className}
+      width={width}  
+      height={height}
+      itemData={list}
+      itemCount={dataLen}
+      itemSize={itemHeight}
+      onScroll={handleScroll}
+    >{Row}</VirtualList>
+  )
+}