Page 1 of 1

在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 5日 10:37
by MwM-Mai

当scroll-view出现长列表的,在idea中会出现警告
[Page] The number of nodes in the page is 1223, which is greater than 1000, which may cause performance issues. in "pages/device/index"
使用 '@ray-js/components-ty-perf-text'结合滑动条滑动滑动条的时候还是val文本还是无法实时更新会出现延迟;
思路一: 当我使用虚拟化长列表仅渲染可见数据的方法来尝试优化node节点过多的时候会发现触底更新列表数据后会发现子nodes会清空在重新挂载,出现数据闪一下在渲染出来;
思路二: 仅用分页的方法来优化,会出现上拉加载数据多后还是出现滑动条的val更新延迟问题;

是否有更好的思路,求助一下


Re: 在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 5日 10:44
by crisiron

https://developer.tuya.com/material/lib ... ecycleView 使用这个虚拟列表组件试试


Re: 在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 5日 11:00
by MwM-Mai
crisiron 2024年 Nov 5日 10:44

https://developer.tuya.com/material/lib ... ecycleView 使用这个虚拟列表组件试试

我看了下源码是对scroll-view二次封装的,这个组件能用scroll-view中的scroll-into-view属性吗


Re: 在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 5日 11:03
by crisiron
MwM-Mai 2024年 Nov 5日 11:00
crisiron 2024年 Nov 5日 10:44

https://developer.tuya.com/material/lib ... ecycleView 使用这个虚拟列表组件试试

我看了下源码是对scroll-view二次封装的,这个组件能用scroll-view中的scroll-into-view属性吗

理论上是支持的, 可以试试


Re: 在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 7日 15:55
by MwM-Mai
crisiron 2024年 Nov 5日 11:03
MwM-Mai 2024年 Nov 5日 11:00
crisiron 2024年 Nov 5日 10:44

https://developer.tuya.com/material/lib ... ecycleView 使用这个虚拟列表组件试试

我看了下源码是对scroll-view二次封装的,这个组件能用scroll-view中的scroll-into-view属性吗

理论上是支持的, 可以试试

你好, 因为需求不一样,我这边还需要做歌曲定位功能, 所以自己实现了虚拟化列表,但是会发现快速滑动出现短暂白屏问题,已经加上了buffer缓冲区了,还是会出现,请问如何解决呢


Re: 在一个页面中使用scroll-view和滑动条如何性能优化?

Posted: 2024年 Nov 7日 16:28
by crisiron

两个思路试试:1. 增加buffer 缓冲区; 2. scroll 事件函数加节流