文章插图
文章插图
可以看到，下拉加载消息与当前消息的衔接非常平滑没有任何的跳动，实际上这个时候历史消息是在底部渲染的，只不过反向渲染让它看上去是在顶部渲染的；此外，页面一进来最新消息和滚动条位置无需任何处理自然地停留在最底部，接近原生体验 。
这种 “反向渲染” 的思路用最少的代码就解决了消息场景在小程序上这种几乎无解的问题，并且达到了最优的体验，而实际上核心代码只有两行 CSS：
transform: rotate(180deg);direction: rtl;整个过程无需任何手动设置滚动位置和计算第二屏总高度（实际上都不用关心它们），同样这种思路用在 Web 上也是 OK 的 。当然用了反向渲染也有一些牺牲，比如 IOS 双击顶部栏回到顶部这个特点就不能用了，但总体来说获得体验上的优化是更多的 。
文章插图
此外，聊天场景中的消息流通常也有这样的布局：
文章插图
如果视觉上需要将自己和别人的消息方向分别位列两边对齐，那么利用这种 “反向渲染” 的思路，实现起来也非常容易，只需要对消息组件应用不同的 CSS 样式即可：
文章插图
消息流的每一条消息都是一个单独的组件，此时不需要为了区分不同的视角而去新写一个组件，也不需要改变现有组件的结构布局 。
文章插图
?? 最后
如果你觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！
【聊天场景在web前端开发中的体验与优化】
推荐阅读
- 在生意参谋中通过以下哪个模块可以查看竞品的流量结构 在生意参谋中通过以下哪个模块可以查看竞品的流量结构
- 怎么设置打印机共享
- MAC如何实现屏幕缩放
- 为什么银行现在基本不催收？
- 超级推荐创意长图怎么做
- 直通车可以开发票吗 淘宝直通车可以开票吗
- 运动鞋尺码怎么选择
- 运动鞋价格盘点
- 肾结石中药及治疗方法
- 空腹吃钙片的方法