下面先来看看效果
为实现这样的效果，首先要解决两个问题：1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题；2.键盘弹出或收起时，聊天消息没有自动滚到最底部。首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）：1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度msg条数)px。
2.用将展示msg的目标scroll-view包裹，通过js获取到该view的实际高度：
varthat=this;varquery=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'可监听软键盘收起，varwindowHeight=wx.getSystemInfoSync().windowHeight;可获得屏幕高度。
scrollHeight（滚动条高度）=windowHeight（屏幕高度）-软键盘高度;
最后将input组件放在软键盘上面就完成了。
|||||||
各位要不要代码？|||||||contact.js:
//pages/contact/contact.jsconstapp=getApp();varinputVal='';varmsgList=[];varwindowWidth=wx.getSystemInfoSync().windowWidth;varwindowHeight=wx.getSystemInfoSync().windowHeight;varkeyHeight=0;/初始化数据/functioninitData(that){inputVal='';msgList=[{speaker:'server',contentType:'text',content:'欢迎来到英雄联盟，敌军还有30秒到达战场，请做好准备！'},{speaker:'customer',contentType:'text',content:'我怕是走错片场了...'}]that.setData({msgList,inputVal})}/计算msg总高度///functioncalScrollHeight(that,keyHeight){//varquery=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--viewscroll-viewscroll-yscroll-into-view='{{toView}}'style='height:{{scrollHeight}};'!--viewclass='scrollMsg'--blockwx:keywx:for='{{msgList}}'wx:for-index="index"!--单个消息1客服发出（左）--viewwx:if='{{item.speaker=="server"}}'id='msg-{{index}}'style='display:flex;padding:2vw11vw2vw2vw;'viewstyle='width:11vw;height:11vw;'imagestyle='width:11vw;height:11vw;border-radius:10rpx;'src='../../images/contact_member.png'/image/viewviewstyle='width:4vw;height:11vw;margin-left:0.5vw;display:flex;align-items:center;z-index:9;'imagestyle='width:4vw;'src='../../images/left_msg.png'mode='widthFix'/image/viewviewclass='leftMsg'{{item.content}}/view/view!--单个消息2用户发出（右）--viewwx:elseid='msg-{{index}}'style='display:flex;justify-content:flex-end;padding:2vw2vw2vw11vw;'viewclass='rightMsg'{{item.content}}/viewviewstyle='width:4vw;height:11vw;margin-right:0.5vw;display:flex;align-items:center;z-index:9;'imagestyle='width:4vw;'src='../../images/right_msg.png'mode='widthFix'/image/viewviewstyle='width:11vw;height:11vw;'imagestyle='width:11vw;height:11vw;border-radius:10rpx;'src='{{cusHeadIcon}}'/image/view/view/block!--/view--!--占位--viewstyle='width:100%;height:18vw;'/view/scroll-viewviewclass='inputRoom'style='bottom:{{inputBottom}}'imagestyle='width:7vw;margin-left:3.2vw;'src='../../images/pic_icon.png'mode='widthFix'/imageinputbindconfirm='sendClick'adjust-position='{{false}}'value='{{inputVal}}'confirm-type='send'bindfocus='focus'bindblur='blur'/input/view/viewcontact.wxss:
/pages/contact/contact.wxss/page{background-color:#f1f1f1;}.inputRoom{width:100vw;height:16vw;border-top:1pxsolid#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:03vw;font-size:28rpx;color:#444;}.leftMsg{font-size:35rpx;color:#444;line-height:7vw;padding:2vw2.5vw;background-color:#fff;margin-left:-1.6vw;border-radius:10rpx;z-index:10;}.rightMsg{font-size:35rpx;color:#444;line-height:7vw;padding:2vw2.5vw;background-color:#96EB6A;margin-right:-1.6vw;border-radius:10rpx;z-index:10;}到此就结束了，希望能帮到各位，记得拿走时请扣6有问题在评论区留言或加QQ群104420392找我
