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

介绍微信小程序实现仿微信聊天界面，分享给大家，具体如下：

我们先来看看效果

要达到这个效果，首先要解决两个问题：

1.点击输入框弹出软键盘后，会弹出一点聊天内容，造成看不见的问题；

2.当键盘弹出或缩回时，聊天信息不会自动滚动到底部。

首先解决第二个问题，自动滚动到底部，非常简单。这里有三种方法(推荐第三种):

1.计算每条消息的最大高度，并设置scroll-top=(单个消息的最大高度msg数)px。

2.用显示消息的目标滚动视图包装它。

通过js获取视图的实际高度：

变量=这个；var query=wx . createselectorquery()；query.select('。scrolmsg’)。boundingClientRect(函数(rect){ that . setdata({ scrolltop : rect . height ' px '；});}).exec()；3.(推荐)所有msg的编号如下：msg-0，msg-1，msg-2…直接锁定最后一个msg，滚动到那里。

在滚动视图中添加滚动到视图='{{toView}} '，在wx:for之后添加wx:for-index=' index '，在每个消息布局中添加id='msg-{{index}} '，最后：

这个。setdata({查看：' msg-'(msglist。length-1)})已经解决了这里的第二个问题，那么让我们回去解决第一个问题：

(点击输入框弹出软键盘后，会弹出一点聊天内容，造成看不见的问题)

1.首先，我们需要关闭输入的自动上推。这里有一个坑：

将：adjust-position=“{ { false } }”添加到输入组件。

而不是：调整位置='false '。

虽然这不会再向上推，但当软键盘弹出时，它会导致屏幕下部的消息被阻止。

2.如何解决软键盘弹出时屏幕下方的消息会被屏蔽的问题？

当软键盘弹起时，滚动视图的高度缩短到屏幕的上部，不会被软键盘挡住。当软键盘折叠时，滚动视图的高度恢复，从而解决了遮挡问题。

提示：

Bindfocus='focus '在输入时可以得到软键盘的高度并监控软键盘弹出，bindflur=' blur '可以监控软键盘折叠起来，var window height=wx . getsysteminfosync()。窗高；可以获得屏幕高度。

scroll height=window height-软键盘的高度；

最后，将输入组件放在软键盘上。

你要密码吗？

contact.js:

//页面/联系人/联系人。jsconst app=GetApp()；var inputVal=var msgList=[]；var windowWidth=wx。getsysteminfosync().windowWidthvar windowHeight=wx。getsysteminfosync().windowHeightvar key height=0；/** * 初始化数据*/函数initData(即){ inputVal=msgList=[{ speaker : ' server '，contentType: 'text '，content: '欢迎来到英雄联盟，敌军还有30秒到达战场，请做好准备!'}，{ speaker: '客户，contentType: '文本，content: '我怕是走错片场了.'} ] that.setData({ msgList，inputVal })}/** *计算味精总高度*///函数calScrollHeight(即键高度){//var query=wx。createselectorquery()；//query.select(' .scrolmsg ').boundingClientRect(函数(rect) {//}).exec()；//}页({ /** *页面的初始数据*/data : { scroll height : ' 100 VH '，inputBottom: 0 }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ init data(this)；这个。setdata({ cusedia icon : app。全球数据。用户信息。头像URL，})；}, /** * 生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *获取聚焦*/focus:函数{ KeyHeight=e . detail。身高；这个。setdata({ scrollheight :(窗口高度-按键高度)' px ' })；这个。setdata({查看： ' msg-'(msglist。长度-1)，InputBottom : KeyHeight ' px ' })//计算味精高度//calScrollHeight(这个，键高)；}, //失去聚焦（软键盘消失)简介：函数{这个。setdata({ scroll height : ' 100 VH '，inputbottom : 0 })这个。setdata({查看： ' msg-'(msglist。length-1)})}，/** *发送点击监听*/sendClick:函数{ msglist。push({ speaker : ' customer '，contentType: 'text '，content : e . detail。value })输入val=this.setData({ msgList，input val })；}, /** * 退回上一页*/toBackClick:函数(){ wx。向后导航({ })})联系人。wxml :

！-页面/联系人/联系人。wxml-view scroll-view scroll-y在视图中滚动=' { { to view } } ' style=' height : { { scroll height } }；'！-view class=' scrolmsg '-block wx : key wx : for=' { { msgList } } ' wx : for-index=' index '！-单个消息一客服发出（左)-查看wx : if=' { { item。speaker==' server ' } } ' id=' msg-{ { index } } ' style=' display : flex；padding: 2vw 11vw 2vw 2vw视图样式='宽度： 11vw '高' : 11大众；'图像样式='宽度： 11vw高' : 11大众；'边界半径： 10 rpx“src=”././images/contact _ member。png '/图像/视图视图样式='宽度： 4 VW高： 11大众；余量-左侧： 0.5大众；display : flex align-items :居中；z指数：9 '图像样式=' width: 4vw'' src='././images/left _ msg。png ' mode=' width fix '/image/view view class=' left msg ' { item。内容} }/查看/查看！-单个消息2用户发出（右)-view wx : else id=' msg-{ { index } } ' style=' display : flex；正义-内容：灵活端；padd : 2vw 2vw 2vw 11vw view class='右消息' { item。内容} }/视图视图样式='宽度： 4大众；高： 11大众；右边距： 0.5大众；display : flex align-items :居中；z指数：9 '图像样式=' width: 4vw'' src='././images/right _ msg。png ' mode=' width fix '/image/view view style=' width : 11 VW；'高' : 11大众；'图像样式='宽度： 11vw高' : 11大众；'边界半径： 10 rpxsrc=' { { cushead icon } } '/image/view/view/block！- /view -！-占位-视图样式='宽度： 100%；'高' : 18大众；'/view/scroll-view view class=' input trom ' style=' bottom : { { input bottom } } ' image style=' width : 7 VW；左边距-: 3.2瓦特；'' src='././images/pic _ icon。png ' mode=' width fix '/image input bind confirm=' send click ' adjust-position=' { { false } } ' value=' { { input val } } ' confirm-type=' send ' bind focus=' focus ' bind blur=' blur '/input/view/view contact。wxss 3360

/*页面/联系人/联系人。wxss */page {底色： # f1 f1 f1}.inputRoom { width: 100vw高： 16大众；边框-top: 1px实心# cdcdcdcd背景-color : # f1 f1；位置：固定；底部： 0；display : flex align-items :居中；z指数： 20;}输入{宽度： 76vw高： 9.33大众；背景-color : # fff；边界半径： 40 rpx左边距-: 2vw；padd : 0 3vwfont-size : 28 rpx；color: # 444}。左MSg { font-size : 35 rpx颜色： # 444线高： 7大众；padding: 2vw 2.5vw背景-color : # fff；余量-左侧：-1.6大众；边界半径： 10 rpxz指数： 10；}.右MSg { font-size : 35 rpx颜色： # 444线高： 7大众；padding: 2vw 2.5vw背景色-: # 96EB6A；右边距：-1.6大众；边界半径： 10 rpxz指数： 10；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。