+
)
@@ -192,6 +148,7 @@ const App =() => {
export default App;
```
:::
+
## API
### Props
@@ -199,17 +156,16 @@ export default App;
| 参数 | 说明 | 类型 | 默认值 |
|---------------|----------------------------------|----------|---------------------------------------|
| sourceData | 获取数据 | Array | - |
-| containerSize | 容器高度 | Number | 获取元素的 offsetWidth 或 offsetHeight，需要 css 给出 |
+| containerSize | 容器高度 | Number | 获取元素的 offsetHeight，需要 css 给出 |
| ItemRender | virtual 列表父节点渲染的函数 | React.FC | - |
-| itemSize | item高度，如果不定高，则为首屏单个最大size | String | - |
| itemEqualSize | item大小是否一致 | Boolean | true |
+| itemSize | item高度，如果不定高，会走默认高度 | String | 66 |
| overscan | 除了视窗里面默认的元素, 还需要额外渲染的item个数 | Number | 2 |
| key | 唯一值 ,Item(sourceData)具体的某个唯一值的字段 | string | index |
-| horizontal | 决定列表是横向的还是纵向的 | Boolean | false |
+
## Events
| 方法名 | 说明 | 参数 | 返回值 |
|------------------|---------------------| --------------- | ---------- |
-| handleScroll`废弃` | 滑动到底(右)的事件，可以实现无限滚动 | - | - |
| onScroll`v1.3.8` | 滑动到底(右)的事件，可以实现无限滚动 | - | - |
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index 34f9d49bd910809213cbca0fb7261db3e294f5bd..ed574d42d40b180932354834d3df774443435567 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -61,3 +61,27 @@
}
}
}
+
+.nut-virtuallist {
+ width: 100%;
+ overflow: scroll;
+ position: relative;
+ -webkit-overflow-scrolling: touch;
+ &-phantom {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ z-index: -1;
+ }
+ &-container {
+ left: 0;
+ right: 0;
+ top: 0;
+ position: absolute;
+ }
+ &-item {
+ overflow: hidden;
+ margin: $list-item-margin;
+ }
+}
diff --git a/src/packages/virtuallist/virtuallist.taro.tsx b/src/packages/virtuallist/virtuallist.taro.tsx
index 4bdf18caf909221973a4b48f686feccb8bcff19a..17000a60eb9c47ed9b5bee5ea92455720b265604 100644
--- a/src/packages/virtuallist/virtuallist.taro.tsx
+++ b/src/packages/virtuallist/virtuallist.taro.tsx
@@ -1,22 +1,38 @@
import React, {
FunctionComponent,
- useCallback,
useEffect,
useRef,
useState,
+ useCallback,
} from 'react'
+import { ScrollView } from '@tarojs/components'
+import Taro from '@tarojs/taro'
import { useConfig } from '@/packages/configprovider/configprovider.taro'
-import { BasicVirtualListProps, VirtualListState, PositionType } from './type'
-import {
- initPositinoCache,
- getListTotalSize,
- binarySearch,
- getEndIndex,
- updateItemSize,
-} from './utils'
-
-export type VirtualListProps = BasicVirtualListProps
-const defaultProps = {} as VirtualListProps
+import { VirtualListState, PositionType } from './type'
+import { initPositinoCache, binarySearch, updateItemSize } from './utils'
+
+export type VirtualListProps = {
+ className?: string | any
+ style?: React.CSSProperties
+ sourceData: any // 获取数据
+ containerSize?: number // 容器大小
+ ItemRender?: any // virtual 列表父节点渲染的函数，默认为 (items, ref) =>
{items}
+ itemEqualSize?: boolean // item 固定大小，默认是true
+ itemSize?: number // 预估元素高度
+ overscan?: number // 除了视窗里面默认的元素, 还需要额外渲染的, 避免滚动过快, 渲染不及时,默认是2
+ onScroll?: (...args: any[]) => any // 滑动到底部执行的函数
+ key?: any // 遍历时生成item 的唯一key,默认是index,建议传入resources的数据具体的某个唯一值的字段
+ locale?: any
+}
+const defaultProps = {
+ sourceData: [],
+ itemSize: 66,
+ itemEqualSize: true,
+ overscan: 2,
+} as VirtualListProps
+
+const clientHeight = Taro.getSystemInfoSync().windowHeight - 5 || 667
+const clientWidth = Taro.getSystemInfoSync().windowWidth || 375
export const VirtualList: FunctionComponent<
VirtualListProps & React.HTMLAttributes
@@ -24,27 +40,29 @@ export const VirtualList: FunctionComponent<
const {
sourceData = [],
ItemRender,
+ itemSize = 66,
itemEqualSize = true,
- itemSize = 200,
- horizontal = false,
overscan = 2,
key,
- handleScroll,
onScroll,
className,
- containerSize,
+ containerSize = clientHeight,
...rest
} = props
- const sizeKey = horizontal ? 'width' : 'height'
- const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop'
- const offsetKey = horizontal ? 'left' : 'top'
+ // const sizeKey = horizontal ? 'width' : 'height'
+ // const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop'
+ // const offsetKey = horizontal ? 'left' : 'top'
+
+ const [startOffset, setStartOffset] = useState(0)
+ const [start, setStart] = useState(0)
+ const [list, setList] = useState(sourceData.slice())
const { locale } = useConfig()
// 虚拟列表容器ref
const scrollRef = useRef(null)
// 虚拟列表显示区域ref
- const itemsRef = useRef(null)
- const firstItemRef = useRef(null)
+ const itemsRef = useRef(null)
+ const firstItemRef = useRef(null)
// 列表位置信息
const [positions, setPositions] = useState([
{
@@ -57,10 +75,7 @@ export const VirtualList: FunctionComponent<
right: 0,
},
])
- // 列表总大小
- const [listTotalSize, setListTotalSize] = useState(99999999)
- // 可视区域条数
- const [visibleCount, setVisibleCount] = useState(0)
+
const [offSetSize, setOffSetSize] = useState(containerSize || 0)
const [options, setOptions] = useState({
startOffset: 0, // 可视区域距离顶部的偏移量
@@ -69,97 +84,88 @@ export const VirtualList: FunctionComponent<
endIndex: 10, // 可视区域结束索引
})
- // 列表位置信息
useEffect(() => {
- const pos = initPositinoCache(itemSize, sourceData.length)
- setPositions(pos)
- const totalSize = getListTotalSize(pos, horizontal)
- setListTotalSize(totalSize)
- }, [sourceData, itemSize, horizontal])
- const getElement = useCallback(() => {
- return scrollRef.current?.parentElement || document.body
- }, [])
+ if (sourceData.length) {
+ setList(sourceData.slice())
+ }
+ }, [sourceData])
+
+ // 初始计算可视区域展示数量
+ useEffect(() => {
+ setPositions((options) => {
+ return { ...options, endIndex: visibleCount() }
+ })
+ }, [itemSize, overscan, offSetSize])
+
useEffect(() => {
if (containerSize) return
- const size = horizontal
- ? getElement().offsetWidth
- : getElement().offsetHeight
- setOffSetSize(size)
- }, [getElement, horizontal, containerSize])
+
+ setOffSetSize(getContainerHeight())
+ }, [containerSize])
+
useEffect(() => {
- // 初始-计算visibleCount
- if (offSetSize === 0) return
- const count = Math.ceil(offSetSize / itemSize) + overscan
+ const pos = initPositinoCache(itemSize, sourceData.length)
- setVisibleCount(count)
- setOptions((options) => {
- return { ...options, endIndex: count }
- })
- }, [getElement, horizontal, itemSize, overscan, offSetSize])
+ setPositions(pos)
+ }, [itemSize, sourceData])
+
+ // 可视区域总高度
+ const getContainerHeight = () => {
+ //初始首页列表高度
+ const initH = itemSize * sourceData.length
+ //未设置containerSize高度，判断首页高度小于设备高度时，滚动容器高度为首页数据高度，减5为分页触发的偏移量
+ let containerH =
+ initH < clientHeight
+ ? initH + overscan * itemSize - 5
+ : Math.min(containerSize, clientHeight)
+
+ return containerH // Math.min(containerSize, clientHeight)
+ }
+ // 可视区域条数
+ const visibleCount = () => {
+ return Math.ceil(getContainerHeight() / itemSize) + overscan
+ }
+
+ const end = () => {
+ return start + visibleCount()
+ }
+
+ const listHeight = () => {
+ return list.length * itemSize
+ }
+
+ const visibleData = () => {
+ return list.slice(start, Math.min(end(), list.length))
+ }
const updateTotalSize = useCallback(() => {
if (!itemsRef.current) return
const items: HTMLCollection = itemsRef.current.children
if (!items.length) return
// 更新缓存
- updateItemSize(positions, items, sizeKey)
- const totalSize = getListTotalSize(positions, horizontal)
- setListTotalSize(totalSize)
- }, [positions, sizeKey, horizontal])
-
- const scroll = useCallback(() => {
- requestAnimationFrame((e) => {
- const scrollSize = getElement()[scrollKey]
- const startIndex = binarySearch(positions, scrollSize, horizontal)
- const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0
- // const offSetSize = horizontal ? getElement().offsetWidth : getElement().offsetHeight
- if (!itemEqualSize) {
- updateTotalSize()
- }
- const endIndex = getEndIndex({
- sourceData,
- startIndex,
- visibleCount,
- itemEqualSize,
- positions,
- offSetSize,
- sizeKey,
- overscan,
- })
- const startOffset = positions[startIndex][offsetKey] as number
- setOptions({ startOffset, startIndex, overStart, endIndex })
- // 无限下滑
- if (endIndex > sourceData.length - 1) {
- if (onScroll) {
- onScroll()
- } else if (handleScroll) {
- handleScroll()
- }
- }
- })
- }, [
- positions,
- getElement,
- sourceData,
- visibleCount,
- itemEqualSize,
- updateTotalSize,
- offsetKey,
- sizeKey,
- scrollKey,
- horizontal,
- overscan,
- handleScroll,
- offSetSize,
- ])
+ updateItemSize(positions, items, 'height')
+ }, [positions])
- useEffect(() => {
- const element = getElement()
- element.addEventListener('scroll', scroll, false)
- return () => {
- element.removeEventListener('scroll', scroll, false)
+ // 滚动监听
+ const listScroll = (e: any) => {
+ const scrollTop = e.detail ? e.detail.scrollTop : e.target.scrollTop
+ const scrollSize = Math.floor(scrollTop)
+ const startIndex = binarySearch(positions, scrollSize, false)
+
+ const overStart = startIndex - overscan > -1 ? startIndex - overscan : 0
+ const endIndex = end()
+ if (!itemEqualSize) {
+ updateTotalSize()
+ }
+ setStart(Math.floor(scrollTop / itemSize))
+
+ setOptions({ startOffset, startIndex, overStart, endIndex })
+
+ if (end() > list.length - 1) {
+ onScroll && onScroll()
}
- }, [getElement, scroll])
+ setStartOffset(scrollTop - (scrollTop % itemSize))
+ }
return (
-
-
+
- {sourceData
- .slice(options.overStart, options.endIndex)
- .map((data, index) => {
- const { startIndex, overStart } = options
- const dataIndex = overStart + index
- const styleVal = dataIndex < startIndex ? 'none' : 'block'
- const keyVal = key && data[key] ? data[key] : dataIndex
-
- return (
-
- {ItemRender ? (
-
- ) : (
- data
- )}
-
- )
- })}
-
-
+ {visibleData().map((data: any, index: number) => {
+ const { overStart } = options
+ const dataIndex = overStart + index
+ const keyVal = key && data[key] ? data[key] : dataIndex
+ return (
+
+ {ItemRender ? (
+
+ ) : (
+ data
+ )}
+
+ )
+ })}
+
+