本文介紹了微信小程序?qū)崿F(xiàn)仿微信聊天界面，分享給大家，具體如下：

下面先來看看效果

為實現(xiàn)這樣的效果，首先要解決兩個問題：

1.點擊輸入框彈出軟鍵盤后，將已有的少許聊天內(nèi)容彈出，導致看不到的問題；

2.鍵盤彈出或收起時，聊天消息沒有自動滾到最底部。

首先解決第二個問題，自動滾動到最底部，這很簡單，這里提供三種方法（推薦第三種）：

1.計算每條消息的最大高度，設置scroll-top=(單條msg最大高度 * msg條數(shù))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)})

到這里第二個問題解決了，那么我們回過來解決第一個問題：

（點擊輸入框彈出軟鍵盤后，將已有的少許聊天內(nèi)容彈出，導致看不到的問題）

1.首先我們需要將input的自動向上推給關(guān)掉，這里有個坑：

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

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

這么做雖然不再向上推，但卻導致了軟鍵盤彈起時，會遮擋屏幕下部分的消息。

2.如何解決軟鍵盤彈起時，會遮擋屏幕下部分的消息？

當軟鍵盤彈起時，將scroll-view的高度縮短至軟鍵盤遮擋不到的屏幕上方部分，當軟鍵盤收起時，再將scroll-view的高度還原，這樣解決了遮擋問題。

提示：

input中的bindfocus='focus'可獲取軟鍵盤高度并監(jiān)聽軟鍵盤彈起，bindblur='blur'可監(jiān)聽軟鍵盤收起，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;/** * 初始化數(shù)據(jù) */function initData(that) { inputVal = ''; msgList = [{   speaker: 'server',   contentType: 'text',   content: '歡迎來到英雄聯(lián)盟，敵軍還有30秒到達戰(zhàn)場，請做好準備！'  },  {   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({ /**  * 頁面的初始數(shù)據(jù)  */ data: {  scrollHeight: '100vh',  inputBottom: 0 }, /**  * 生命周期函數(shù)--監(jiān)聽頁面加載  */ onLoad: function(options) {  initData(this);  this.setData({   cusHeadIcon: app.globalData.userInfo.avatarUrl,  }); }, /**  * 生命周期函數(shù)--監(jiān)聽頁面顯示  */ onShow: function() { }, /**  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作  */ onPullDownRefresh: function() { }, /**  * 頁面上拉觸底事件的處理函數(shù)  */ 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)  }) }, /**  * 發(fā)送點擊監(jiān)聽  */ sendClick: function(e) {  msgList.push({   speaker: 'customer',   contentType: 'text',   content: e.detail.value  })  inputVal = '';  this.setData({   msgList,   inputVal  }); }, /**  * 退回上一頁  */ toBackClick: function() {  wx.navigateBack({}) }})