需求:需要实现聊天室功能,聊天记录倒序,下拉滚动到顶部后,加载更多历史消息。
初步方案:跟社区里大多数一样,把数据按倒序存放,最新的聊天记录放最后面,最旧的放前面。 5 4 3 2 1,倒序。 然后滚动到顶部,拉取10 9 8 7 6后,放入列表为10 9 8 7 6 5 4 3 2 1。这个时候就会出现scroll-view自动滚动到顶部问题。尝试过保持scroll-top的位置,效果不理想,会闪烁,而且在ios真机上无效。
思考和修改方案:正常的列表上拉加载更多是正常的,只要列表的数据头部增加会导致这个问题。 考虑采用正常顺序,使用样式来反向列表显示:
1、消息数据:1 2 3 4 5, 请求到更多历史消息 10 9 8 7 6后,存入列表后面为:1 2 3 4 5 6 7 8 9 10.
2、scroll-view设置enable-flex属性为true。 添加样式:
display: flex; flex-direction: column-reverse;
3、bindscrolltoupper监听加载更多历史消息
完美适配,体验也比较完美
但是下拉刷新的scrollTop一直是负的, 稍微滑动一下就全部加载了
加载下一页的时候,还是会回到顶部呀,:scroll-top 已经去了
你好 按照你的方法是ok了 但是我的会闪一下是为什么
、
加载完数据之后 scrollTop直接跳到顶部 从-1582到-3782 感觉也不行
给你个大大的赞,一直被这个问题困扰。
ios下拉scrolltoupper会多次触发
请问我在开发者工具测试怎么划不动呢?
设置column-reverse之后,iPhone会出现下滑不动的情况。
正好要做这个功能,不错。