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

ios下拉皮筋效果适配 #5

Closed Tangjuyi closed 8 months ago

Tangjuyi commented 8 months ago

https://keno-lee.github.io/vue-virt-list/examples/chat/ 聊天室demo ios 由于下拉皮筋效果,在加载中多下拉几次,滚动位置会一直在顶部

临时解决方案 document.querySelector(".virt-list__client").style.overflow = "hidden"

keno-lee commented 8 months ago

https://keno-lee.github.io/vue-virt-list/examples/chat/ 聊天室demo ios 由于下拉皮筋效果,在加载中多下拉几次,滚动位置会一直在顶部

临时解决方案 document.querySelector(".virt-list__client").style.overflow = "hidden"

收到,试了一下,在IOS的safari和chrome中,确实有这个问题。初步判断为toTop和toBottom的问题,具体原因再详细排查一下

keno-lee commented 8 months ago

https://keno-lee.github.io/vue-virt-list/examples/chat/ 聊天室demo ios 由于下拉皮筋效果,在加载中多下拉几次,滚动位置会一直在顶部

临时解决方案 document.querySelector(".virt-list__client").style.overflow = "hidden"

已经在v1.0.2版本中解决该问题,主要原因是ios中resizeOberver兼容性问题。但发现ios浏览器中向上平滑滚动功能仍旧有问题,修复抖动的代码无法生效,原因还在寻找中,ios和safari不愧是现代版本ie。后续有进展我回复你,感谢反馈

以下是发布内容:

修复ios浏览器resizeObserver兼容性问题,(其他浏览器不受影响)

keno-lee commented 8 months ago

聊天室场景更推荐使用:RealList。已在真实IM聊天项目中使用 https://keno-lee.github.io/vue-virt-list/examples/pagination-real/

Tangjuyi commented 8 months ago

聊天室场景更推荐使用:RealList。已在真实IM聊天项目中使用 https://keno-lee.github.io/vue-virt-list/examples/pagination-real/

这个应该不适合聊天室,大多聊天室都是向上翻页,类似微信一样

keno-lee commented 8 months ago

聊天室场景更推荐使用:RealList。已在真实IM聊天项目中使用 https://keno-lee.github.io/vue-virt-list/examples/pagination-real/

这个应该不适合聊天室,大多聊天室都是向上翻页,类似微信一样

只是demo中,初始的时候没设置成最后一页。如果设置成最后一页就可以了。IM有两种,一个是向上加载更多的时候,内存数据稳定增加。还有一种是上下数据都采取分页模式(减少内存使用量),不管是向上还是向下都是从新拉取数据,这种就可以采用demo中的分页模式

Tangjuyi commented 8 months ago

聊天室场景更推荐使用:RealList。已在真实IM聊天项目中使用https://keno-lee.github.io/vue-virt-list/examples/pagination-real/

这个应该不适合聊天室,大部分聊天室都是向上翻页,类似微信一样

只是demo中,初始的时候没设置成最后一页。如果设置成最后一页就可以了。IM有两种,一个是向上加载更多的时候,内存稳定数据增加。还有一种是上下数据都采用分页模式(减少内存使用量),无论是向上还是延续都是从新拉取数据,这种就可以采用demo中的分页模式

膜拜大佬