useVirtualList 和 useInfiniteScroll如何一起使用

[Roywhite]

Describe the bug

我想结合虚拟列表和无限滚动，虚拟列表需要使用无限滚动的数据，无限滚动需要使用虚拟列表的ref

Steps to reproduce

示例代码： const [list, container] = useVirtualList(data.list, { wrapperTarget: wrapperRef, itemHeight: 100, overscan: 1 })

const { data, loading, loadMore, loadingMore, noMore } = useInfiniteScroll((d) => getLoadMoreList(d?.nextId, 4), { target: container.ref, isNoMore: (d) => d?.nextId === undefined })

System Info

总有一个会报错在未定义前使用了，如何正确结合这两个使用？

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a VueHooks Plus issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Roywhite]

然后useInfiniteScroll如何支持往上滚动加载数据（目前是触底加载数据）

[NelsonYong]

@Roywhite 你可以在 useInfiniteScroll 的 onSuccess 的回调中获取 data list，外部用个 ref 保存，如何扔给虚拟滚动。 useInfiniteScroll 目前只支持向下滚动，因为向上的话一般都是刷新，不会加载。如果数据已经获取到了，这个时候向上就已经有数据了，为何还需要向上加载呢？

[Roywhite]

比如部分聊天场景下，比如discord或者QQ那种上面消息区、下面输入框这种，用户发送一条记录后消息区最底部新增一条，然后消息区往上滚动加载新数据到最顶部

[NelsonYong]

@Roywhite 明白你的意思，目前没办法很好的做好虚拟滚动hook 结合无限滚动 hook，做到向上滚动加载，除非使用监听 scroll 的hook ,自己根据变化去调用 useInfiniteScroll 的 load more