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

增加事件 #35

Closed existenceO closed 4 months ago

existenceO commented 4 months ago

Hello！

请问可以考虑增加事件onRenderRangeUpdated吗？ 目前我遇到的情况是在Vue2使用的时候，使用d-pad，往下滚动focus元素（这里我是使用了在这https://github.com/luke-chang/js-spatial-navigation focus框架基础上改动的来控制），由于vue2 diff算法的问题，是整个list dom刷新的，不是像vue3只删去头部，增加尾部，所以focus丢失了——dom已经刷新了。目前想到的是在更新renderRange的时候可以触发一个事件，在事件里再重新再去setFocus。不知道这个事件是否具有比较广的应用，麻烦作者考虑看看，谢谢！

Best Regards

keno-lee commented 4 months ago

这个问题在这里有说明，使用参数即可。这里仅修复iteam在可视区域内的情况。由于是虚拟列表，不在可是区域则需要自行修复，记录selection信息即可。这两种处理我在业务中均已验证过，希望能够帮到你。https://keno-lee.github.io/vue-virt-list/guide/instructions/#%E4%BF%AE%E5%A4%8D%E6%BB%9A%E5%8A%A8selection%E9%97%AE%E9%A2%98

keno-lee commented 4 months ago

Api中有说明，参数名fixSelection

existenceO commented 4 months ago

@keno-lee 😱当时有看到这个说明，但是下面没有相关的参数信息给忽略了，我试试，谢谢！

---------只是加:fixSelection="true"吗？更新我这边的情况：:fixSelection="true"还是会使整个列表重新挂载，ArrowDown往下选中的候选节点元素被刷新了还是失去了focus，晚些时候我更新demo上来

https://github.com/keno-lee/vue-virt-list/assets/50443390/0a1e35d1-9743-4e93-ac86-e9669ef53ad6

keno-lee commented 4 months ago

你的focus是自己设置的样式对吗？组件提供的fixSelection是修复文本选中态的。所以你可以采用跟我相同的办法，在向下滚动中重新设置focus。代码在这里https://github.com/keno-lee/vue-virt-list/blob/master/src/VirtList.tsx

keno-lee commented 4 months ago

似乎确实需要提供事件给你，我空了就添加一个事件吧。

existenceO commented 4 months ago

@keno-lee 是的，focus样式是自己设置的，focus的移动，item的滚动是自己控制。针对Vue2，如果可以有这个事件重新设置会更方便一点，感谢！有兴趣demo可以跑一下看看 --------demo

keno-lee commented 4 months ago

@existenceO 今晚发布。届时通知你 😊

keno-lee commented 4 months ago

@existenceO 已发布：https://github.com/keno-lee/vue-virt-list/releases/tag/v1.2.1

image
existenceO commented 4 months ago

@existenceO 已发布：https://github.com/keno-lee/vue-virt-list/releases/tag/v1.2.1 image

感谢！🎉