本文介紹了微信小程序實現仿微信聊天界面，分享給大家，具體如下：
下面先來看看效果
為實現這樣的效果，首先要解決兩個問題：
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，滾動到那里。
scroll-into-view='{{toView}}'，wx:for-index="index"，id='msg-{{index}}'，最后直接：
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({}) }})contact.wxml:
<!--pages/contact/contact.wxml--><view> <scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'> <!-- <view class='scrollMsg'> --> <block wx:key wx:for='{{msgList}}' wx:for-index="index"> <!-- 單個消息1 客服發出（左） --> <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'> <view style='width: 11vw; height: 11vw;'> <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='../../images/contact_member.png'></image> </view> <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'> <image style='width: 4vw;' src='../../images/left_msg.png' mode='widthFix'></image> </view> <view class='leftMsg'>{{item.content}}</view> </view> <!-- 單個消息2 用戶發出（右） --> <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'> <view class='rightMsg'>{{item.content}}</view> <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'> <image style='width: 4vw;' src='../../images/right_msg.png' mode='widthFix'></image> </view> <view style='width: 11vw; height: 11vw;'> <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='{{cusHeadIcon}}'></image> </view> </view> </block> <!-- </view> --> <!-- 占位 --> <view style='width: 100%; height: 18vw;'></view> </scroll-view> <view class='inputRoom' style='bottom: {{inputBottom}}'> <image style='width: 7vw; margin-left: 3.2vw;' src='../../images/pic_icon.png' mode='widthFix'></image> <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input> </view></view>contact.wxss:
/* pages/contact/contact.wxss */page { background-color: #f1f1f1;}.inputRoom { width: 100vw; height: 16vw; border-top: 1px solid #cdcdcd; background-color: #f1f1f1; position: fixed; bottom: 0; display: flex; align-items: center; z-index: 20;}input { width: 76vw; height: 9.33vw; background-color: #fff; border-radius: 40rpx; margin-left: 2vw; padding: 0 3vw; font-size: 28rpx; color: #444;}.leftMsg { font-size: 35rpx; color: #444; line-height: 7vw; padding: 2vw 2.5vw; background-color: #fff; margin-left: -1.6vw; border-radius: 10rpx; z-index: 10;}.rightMsg { font-size: 35rpx; color: #444; line-height: 7vw; padding: 2vw 2.5vw; background-color: #96EB6A; margin-right: -1.6vw; border-radius: 10rpx; z-index: 10;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
