如何详细解析制作微信小程序中仿微信聊天界面的细节设计？

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

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

首先看看效果，为达到这样的效果，首先需要解决两个问题：

1. 点击输入框弹出软键盘后，将已有的聊天内容弹出。

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

下面先来看看效果

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

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

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

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

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

2.用 将展示msg的目标scroll-view包裹，

通过js获取到该view的实际高度：

var that = this; var query = wx.createSelectorQuery(); query.select('.scrollMsg').boundingClientRect(function(rect) { that.setData({ scrollTop: rect.height+'px'; }); }).exec();

3.（推荐）将所有msg都编号如：msg-0，msg-1，msg-2… 直接锁定最后一条msg，滚动到那里。