怎么在微信小程序中實現(xiàn)微信聊天界面？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、天全ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的天全網(wǎng)站制作公司

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

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

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

1.計算每條消息的最大高度，設(shè)置scroll-top=(單條msg最大高度 * msg條數(shù))px。

2.用 將展示msg的目標(biāo)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)
})

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

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

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

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

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

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

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

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

提示：

input中的bindfocus='focus'可獲取軟鍵盤高度并監(jiān)聽軟鍵盤彈起，bindblur='blur'可監(jiān)聽軟鍵盤收起，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;

/**
 * 初始化數(shù)據(jù)
 */
function initData(that) {
 inputVal = '';

 msgList = [{
   speaker: 'server',
   contentType: 'text',
   content: '歡迎來到英雄聯(lián)盟，敵軍還有30秒到達(dá)戰(zhàn)場，請做好準(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({})
 }

})

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 客服發(fā)出（左） -->
   <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 用戶發(fā)出（右） -->
   <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;
}

看完上述內(nèi)容，你們掌握怎么在微信小程序中實現(xiàn)微信聊天界面的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：怎么在微信小程序中實現(xiàn)微信聊天界面
當(dāng)前路徑：http://aaarwkj.com/article26/jpojjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、ChatGPT、做網(wǎng)站、營銷型網(wǎng)站建設(shè)、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)