search

keno-lee / vue-virt-list

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]
https://keno-lee.github.io/vue-virt-list/
MIT License
294 stars 39 forks source link

[BUG]: 滚动时出现重复创建DOM元素的问题，反复横跳 #19

Closed acmenlei closed 7 months ago

acmenlei commented 7 months ago

使用版本

image

问题复现

https://github.com/keno-lee/vue-virt-list/assets/54731221/d72f5d00-0ddf-4a67-9b9a-bed1969c9b8b

代码配置

image

🙏 麻烦作者有时间能解决一下，感谢。

acmenlei commented 7 months ago

没注意换名字了，我先试试新的包看有没有问题，抱歉。

acmenlei commented 7 months ago

刚才更换了新包 "vue-virt-list": "^1.0.7"，貌似还是有这个问题，不知道是否是我使用的问题，追加DOM后使用forceUpdate更新了虚拟列表

image
apathiaX commented 7 months ago

现在看好像是对渲染列表的数据进行了更改，渲染列表发生变化后会导致计算不准确，可以参考一下https://keno-lee.github.io/vue-virt-list/examples/pagination-virt/中的分页-虚拟列表的 demo，组件内部有提供方法修正的方法

acmenlei commented 7 months ago

修正的方法具体是哪个呢，已经尝试过了demo中的写法貌似没有起效果，方便的话可以给出具体的 api 🙏

apathiaX commented 7 months ago

如果是向列表顶部添加元素，可以在添加完成后使用addedList2Top方法进行修正，传入的参数是新增的列表项，如果是删除列表顶部的元素则需要使用deletedList2Top进行修正，传入的参数是删除的列表项，可以尝试一下

acmenlei commented 7 months ago

使用addedList2Top未解决此问题，我这边是向顶部添加了一个元素，然后使用了addedList2Top方法

image

正常添加没问题的，就是在添加一个新元素之后，再触底加载追加了元素后会发生上面的错乱问题

image
apathiaX commented 7 months ago

截屏2024-03-29 12 00 17 我看这里元素的 id 是相同的？

acmenlei commented 7 months ago

是的，应该是我逻辑上的问题，我换了一种思路解决了。

jijiayou commented 6 months ago

@acmenlei 我也遇到这个问题了--- 如何解决呢

keno-lee commented 6 months ago

@acmenlei 我也遇到这个问题了--- 如何解决呢

是因为listItem.id不唯一导致的。

jijiayou commented 6 months ago

@acmenlei 我也遇到这个问题了--- 如何解决呢

是因为listItem.id不唯一导致的。

谢谢