uniapp scroll-into-view

lxf2023-05-03 11:45:01

uniapp scroll-into-view

最近在做一个微信小程序直播模块,模块中的聊天室功能是使用scroll-view 一维数组形式显示,也没有进行任何优化,导致用户体验感差

首先,模拟优化前的优化聊天室情况

uniapp scroll-into-view

肉眼可见的蛋痛~

但是优化还是要优化滴,不优化是不可能的,但是在开始之前,我觉得有必要把优化步骤分为以下两点

1. 不再使用scroll-into-view设置锚点

因为旧版本是用来的scroll-view 一维数组这就导致了数据添加后页面总是显示的形式加载后的最后一条信息,而不是加载前的最后一条信息,因此,上一个开发者使用了它scroll-into-view数据加载后的属性作为数据加载的属性回位锚点,但是由于锚点指向的切换和数据加载它不是同步发生的,这就导致了这种情况回弹的现象

2. 处理大量数据

因为是聊天室功能,所以不可避免地要加载大量的用户对话、图片等内容,而且由于scroll-view不适合加载大量数据(太菜想不出其他方法),需要在数据加载和显示部分下功夫处理

3. 附加功能处理

聊天室原本还有返回底部等功能存在,因此优化后的原始功能不容忽视

OK开工~

1、倒置scroll-view

为什么要倒置?scroll-view那呢?从以上第一点可以看出,如果需要正序插入数据,必然会出现数据加载后无法显示以下数据但是要解决这种情况,就需要使用它scroll-into-view属性,那么如果需要彻底解决这个问题,就需要从问题的根源出发scroll-view下手

首先是修改前代码?