欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-06 00:01:10
本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下: 下面先来看看效果 为实现这样的效果,首先要解决两个问题: 1.点击输入框弹出软键盘后,将已有的少许...

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

下面先来看看效果

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

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

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。