评论

反向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
收藏
评论

9 个评论

  • undefined
    undefined
    2021-03-25

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

    2021-03-25
    赞同 1
    回复 1
    • 浅海
      浅海
      2022-03-27
      你解决这个问题了吗
      2022-03-27
      回复
  • 阿福
    阿福
    2022-12-24

    加载下一页的时候,还是会回到顶部呀,:scroll-top 已经去了

    2022-12-24
    赞同
    回复
  • 小任i
    小任i
    2022-02-18

    你好 按照你的方法是ok了 但是我的会闪一下是为什么

    2022-02-18
    赞同
    回复 1
    • 付忠
      付忠
      2022-06-20
      随着微信小程序的迭代更新,也有一些奇怪的闪烁问题...暂时没发现更好的办法了
      2022-06-20
      回复
  • 资深贴膜工程师
    资深贴膜工程师
    2021-12-29

    加载完数据之后 scrollTop直接跳到顶部 从-1582到-3782 感觉也不行

    2021-12-29
    赞同
    回复
  • 泡泡
    泡泡
    2021-09-02

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

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

    ios下拉scrolltoupper会多次触发

    2021-04-24
    赞同
    回复 3
    • 2021-06-16
      确实会有这个问题,这个咋解决?
      2021-06-16
      1
      回复
    • M小
      M小
      2021-06-16回复
      我安卓用scrolltoupper触顶事件,ios用监听上拉的高度和内容的高度是否相等来判断是否拉到顶部
      2021-06-16
      回复
    • 初衷
      初衷
      2023-05-29回复M小
      我被这个问题困扰很久了  就是跳到顶部  你解决了没?
      2023-05-29
      回复
  • 。
    2021-03-10

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

    2021-03-10
    赞同
    回复 2
    • 付忠
      付忠
      2021-03-10
      代码片段发来看下,我这边是上线的产品,没有遇到你说的问题
      2021-03-10
      回复
    • A3
      A3
      2023-07-13回复付忠
      建议把你的代码片段分享出来
      2023-07-13
      回复
  • Marvin
    Marvin
    2021-01-19

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

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

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

    2020-12-22
    赞同
    回复 1
    • 浅海
      浅海
      2022-03-27
      ios下拉scrolltoupper会多次触发
      2022-03-27
      回复
登录 后发表内容