向上滚动时，很容出现空白。往下滚动时，到达底部后，没有再获取新的数据，很尴尬

Leonard-Li777 / antd-table-infinity

An infinite scroll component based on antd-table that supports virtual scrolling

Other

285 stars 47 forks source link

向上滚动时，很容出现空白。往下滚动时，到达底部后，没有再获取新的数据，很尴尬 #4

Open miyoosan opened 5 years ago

miyoosan commented 5 years ago

希望能改进一下，或者留个联系方式一起想办法优化

Leonard-Li777 commented 5 years ago

我们自已就是用的这个组件，没有发现问题，你可以做一个演示，让我看看；另外本项目新上线了 PageTable 组件，你看是否能解决你的问题！

miyoosan commented 5 years ago

我们自已就是用的这个组件，没有发现问题，你可以做一个演示，让我看看；另外本项目新上线了 PageTable 组件，你看是否能解决你的问题！

不能...演示是用你们的例子。操作方式是，快速地将滚动条往上拉，然后就有很大概率看到前面几行都是空白的。看了源码，console了一下，是startIndex计算不准确。往上快速拉了之后的瞬间，监听到的scrollTop的值比预期的要大，有时大很多，几倍十几倍。

Leonard-Li777 commented 5 years ago

感谢反馈，antd-table-infinity@1.1.1 已修复

Leonard-Li777 commented 5 years ago

往下滚动时，到达底部后，没有再获取新的数据

是不是因为我们的演示Demo限制了最多加载500行数据，这个不影响正常使用！

miyoosan commented 5 years ago

往下滚动时，到达底部后，没有再获取新的数据

是不是因为我们的演示Demo限制了最多加载500行数据，这个不影响正常使用！

不是。比如，滚动到49，即第50行，就停在那里了...滚动条已经滚到底了。只有往上滚再往下快速滚，才会去获取新数据。我建议是监听滚动时，延时最好小一点，比如12ms，这样不会失真。目前，我暂时不打算用这个组件了，我这两天基于React用div模拟了一个表格，参考react-data-grid的设计思想，实现了一个简版的antd表格，主要是支持树形表格的无限滚动。但现在只能固定行高，不然滚动会有BUG。。如何支持动态变化的行高，我希望在你们这里也能看到一些解决思路。

Leonard-Li777 commented 5 years ago

我测试了，滚到49行不存在你说的问题。只有499时因为数据最多限制了500行，才会有这个问题
虚拟滚动的前提表格整体高度已知，才能确定滚动位置的数据！变化行高是无解的！

xuanhun commented 5 years ago

我看你们的代码有这段，不知道是为了修复什么bug，但是在数据较少的情况下，会因为向上滚动小于20，导致direction的值没有更新，还是”down“。滚动到顶部时候，会出现空白

narueon commented 5 years ago

No. For example, scrolling to 49, the 50th line, stops there... the scroll bar has rolled to the end. Only when you roll up and down quickly will you get new data.

I was facing the same issue. Giving higher pageSize, about 100, fixes the issue for me. Do try it out.

<InfinityTable
    ...
    pageSize={100}
    ...
/>