1***@qq.com
1***@qq.com
  • 发布:2022-06-11 22:55
  • 更新:2022-09-26 22:09
  • 阅读:661

nvue 聊天场景中使用 list cell在下拉加载历史消息时如何保持滚动位置?

分类:nvue

nvue 聊天场景中使用 list cell在下拉加载历史消息时如何保持滚动位置?

下拉加载历史消息 将历史消息数据 unshift到list前 会导致滚动条跳到页面顶部 类似的需求很多 为什么官方不出一个解决办法?

下面是我这段时间来试过的所有相关办法

1: Weex cell组件的keep-scroll-position属性看上去可以完美的解决这个问题 但是很可惜uni-app并没有实现此属性
2:使用 dom.scrollToElement()跳回之前的位置 这种方法可以解决问题 但是体验极其差劲 页面会明显的闪烁
3:将list 和 cell 使用css翻转看起来可以完美解决这个问题 但是在某些场景下依然不合适

致辞曲线救国失败 放弃治疗 希望哪位大佬能够指点迷津

2022-06-11 22:55 负责人:无 分享
已邀请:

最佳回复

DCloud_uniCloud_JSON

DCloud_uniCloud_JSON

内容溢出的方向和滚动条的方向不一致,所以会发生滚动。用css将容器旋转180度,再将内容反方向旋转180度。改变新元素插入的方向即可解决。

  • 1***@qq.com (作者)

    你说的方法不就是我写的第三条方法吗 这种解决方式乍看很完美 但是你将容器反转后虽然解决了下拉加载历史消息的问题 但是带来了一个新问题 那就是(接收新消息时如何保持滚动条位置?比如你在群聊里正在翻看历史消息 这时候来了新消息 你会发现消息在不停的往上滚动 这明显是不合理的)说白了这种方式也不过是把问题 从上方挪到了下方而已

    2022-06-13 16:53

  • 1***@qq.com (作者)

    有没有什么方法能根本的解决问题 是不是因为官方自认为存在上述替代方案 从而降低了这个问题的修改级别 这个问题在社区里已经被反复反馈了很多次 到现在依然没什么进展

    2022-06-13 17:00

  • 西梁

    回复 1***@qq.com: 有新消息,先别插入到list里,在底部浮窗提醒用户,让他点击,然后滚动到底部再插入

    2022-06-13 17:10

  • DCloud_uniCloud_JSON

    回复 西梁: +1

    2022-06-13 20:13

  • 5***@qq.com

    翻转之后,如果内容少,就显示在底部了,上面空白

    2022-06-14 19:18

  • 1***@qq.com (作者)

    回复 西梁: 这。。。 这虽然从设计上避免了这个问题 但是如果可以妥协到这种程度的话 我为什么不选择第二种解决方案 再尽可能的去优化呐

    2022-06-14 20:56

  • 1***@qq.com (作者)

    回复 5***@qq.com: 下面的解决方案链接里 指向的插件说是解决了这个问题 可以参考一下

    2022-06-14 20:57

  • 5***@qq.com

    回复 1***@qq.com: 你这个方案非常好,我已经开始用了

    2022-06-15 12:54

Neveregret

Neveregret

顶一下,这个问题希望官方重视起来

  • 1***@qq.com (作者)

    哎 不抱太大希望

    2022-06-12 15:22

  • Neveregret

    回复 1***@qq.com: 没事就过来顶顶,官方一定会解决的

    2022-06-12 19:50

  • 1***@qq.com (作者)

    回复 Neveregret: 哈哈 我已经预料到 很多同学会说 上面提及的第三种方式 因为他看起来最完美 但也只是看起来

    2022-06-13 17:05

苏陌
  • 1***@qq.com (作者)

    谢谢 这个方法我在上面第三条已经写过了 在群聊的场景下并不能解决问题

    2022-06-13 17:02

6***@qq.com

6***@qq.com

这个问题解决了吗

  • DCloud_uniCloud_JSON

    看置顶评论。另外官方正在开发uni-im,之后会开源

    2022-08-03 21:21

  • 7***@qq.com

    回复 DCloud_uniCloud_JSON: uni-in还没搞出来啊,这么久了

    2022-09-17 16:52

  • 7***@qq.com

    uni-im

    2022-09-17 16:53

  • DCloud_uniCloud_JSON

    回复 7***@qq.com: uni-im已应用在插件市场作为客服功能,处于内部试用阶段。你可以先加IM内测QQ群:854520009

    2022-09-19 11:18

1***@qq.com

1***@qq.com (作者)

插件市场里标榜即时通讯的项目这么多 其实又有几个做的能有正常用户体验的 反正我还没有发现 即时通讯实现功能很简单 好用的即时通讯并不是那么简单 官方uni-im客服系统作为一个网页端的即时通讯做成这样(可以在插件市场体验一下) 移动端的体验可想而知 作为一个前端框架 uni-im更应该体现即时通讯前端的实现技巧 你再封装个云函数或者啥的没有意义

要回复问题请先登录注册