详解微信小程序实现仿微信聊天界面(各种细节处理)

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

下面先来看看效果

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

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，滚动到那里。

最后直接：

this.setData({	toView: 'msg-' + (msgList.length - 1)})

到这里第二个问题解决了，那么我们回过来解决第一个问题：

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

1.首先我们需要将input的自动向上推给关掉，这里有个坑：

在input组件中添加：adjust-position='{{false}}'，

而不是：adjust-position='false'。

这么做虽然不再向上推，但却导致了软键盘弹起时，会遮挡屏幕下部分的消息。

2.如何解决软键盘弹起时，会遮挡屏幕下部分的消息？

当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原，这样解决了遮挡问题。

提示：

input中的bindfocus='focus'可获取软键盘高度并监听软键盘弹起，bindblur='blur'可监听软键盘收起，var windowHeight = wx.getSystemInfoSync().windowHeight;可获得屏幕高度。

scrollHeight（滚动条高度） = windowHeight（屏幕高度） - 软键盘高度;

最后将input组件放在软键盘上面就完成了。

各位要不要代码？

contact.js:

// pages/contact/contact.jsconst app = getApp();var inputVal = '';var msgList = [];var windowWidth = wx.getSystemInfoSync().windowWidth;var windowHeight = wx.getSystemInfoSync().windowHeight;var keyHeight = 0;/** * 初始化数据 */function initData(that) { inputVal = ''; msgList = [{   speaker: 'server',   contentType: 'text',   content: '欢迎来到英雄联盟，敌军还有30秒到达战场，请做好准备！'  },  {   speaker: 'customer',   contentType: 'text',   content: '我怕是走错片场了...'  } ] that.setData({  msgList,  inputVal })}/** * 计算msg总高度 */// function calScrollHeight(that, keyHeight) {//  var query = wx.createSelectorQuery();//  query.select('.scrollMsg').boundingClientRect(function(rect) {//  }).exec();// }Page({ /**  * 页面的初始数据  */ data: {  scrollHeight: '100vh',  inputBottom: 0 }, /**  * 生命周期函数--监听页面加载  */ onLoad: function(options) {  initData(this);  this.setData({   cusHeadIcon: app.globalData.userInfo.avatarUrl,  }); }, /**  * 生命周期函数--监听页面显示  */ onShow: function() { }, /**  * 页面相关事件处理函数--监听用户下拉动作  */ onPullDownRefresh: function() { }, /**  * 页面上拉触底事件的处理函数  */ onReachBottom: function() { }, /**  * 获取聚焦  */ focus: function(e) {  keyHeight = e.detail.height;  this.setData({   scrollHeight: (windowHeight - keyHeight) + 'px'  });  this.setData({   toView: 'msg-' + (msgList.length - 1),   inputBottom: keyHeight + 'px'  })  //计算msg高度  // calScrollHeight(this, keyHeight); }, //失去聚焦(软键盘消失) blur: function(e) {  this.setData({   scrollHeight: '100vh',   inputBottom: 0  })  this.setData({   toView: 'msg-' + (msgList.length - 1)  }) }, /**  * 发送点击监听  */ sendClick: function(e) {  msgList.push({   speaker: 'customer',   contentType: 'text',   content: e.detail.value  })  inputVal = '';  this.setData({   msgList,   inputVal  }); }, /**  * 退回上一页  */ toBackClick: function() {  wx.navigateBack({}) }})