评论

反向scroll-view 完美实现聊天记录列表功能

反向scroll-view 完美实现聊天记录列表功能

需求:需要实现聊天室功能,聊天记录倒序,下拉滚动到顶部后,加载更多历史消息。

初步方案:跟社区里大多数一样,把数据按倒序存放,最新的聊天记录放最后面,最旧的放前面。 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监听加载更多历史消息

完美适配,体验也比较完美

最后一次编辑于  2020-12-22  
点赞 1
收藏
评论

6 个评论

  • 泡泡
    泡泡
    09-02

    给你个大大的赞,一直被这个问题困扰。

    09-02
    赞同
    回复
  • M小
    M小
    04-24

    ios下拉scrolltoupper会多次触发

    04-24
    赞同
    回复 2
    • 芒果味的秋天
      芒果味的秋天
      06-16
      确实会有这个问题,这个咋解决?
      06-16
      1
      回复
    • M小
      M小
      06-16回复芒果味的秋天
      我安卓用scrolltoupper触顶事件,ios用监听上拉的高度和内容的高度是否相等来判断是否拉到顶部
      06-16
      回复
  • undefined
    undefined
    03-25

    但是下拉刷新的scrollTop一直是负的, 稍微滑动一下就全部加载了

    03-25
    赞同
    回复
  • 下一目标130
    下一目标130
    03-10

    请问我在开发者工具测试怎么划不动呢?

    03-10
    赞同
    回复 1
    • 付忠
      付忠
      03-10
      代码片段发来看下,我这边是上线的产品,没有遇到你说的问题
      03-10
      回复
  • Marvin
    Marvin
    01-19

    设置column-reverse之后,iPhone会出现下滑不动的情况。

    01-19
    赞同
    回复 1
    • 付忠
      付忠
      01-22
      我这边实测是正常的。你把scroll-view的代码贴下看下
      01-22
      回复
  • 李美丽爱王可爱
    李美丽爱王可爱
    2020-12-22

    正好要做这个功能,不错。

    2020-12-22
    赞同
    回复
登录 后发表内容