微信小程序如何实现仿微信聊天界面，细节处理如何做到极致？

本文共计1515个文字，预计阅读时间需要7分钟。

本文介绍了微信小程序实现仿微信聊天界面，分享给家长，具体如下：

首先看看效果，为实现类似效果，需要解决以下两个问题：

1. 点击输入框弹出软键盘后，将已有的少许聊天内容滚动到顶部。

本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下：

下面先来看看效果

为实现这样的效果，首先要解决两个问题：

1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题；

2.键盘弹出或收起时，聊天消息没有自动滚到最底部。

首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）：

1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。