這篇文章主要介紹了詳解微信小程序實現仿微信聊天界面(各種細節處理)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
本文介紹了微信小程序實現仿微信聊天界面，分享給大家，具體如下：
下面先來看看效果
爲實現這樣的效果，首先要解決兩個問題：
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-view中添加：
scroll-into-view='{{toView}}'， - 在wx:for後面添加：
wx:for-index="index"， - 在每個msg佈局中添加：
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.js
const 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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。