我要评论本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下：
下面先来看看效果
为实现这样的效果，首先要解决两个问题：
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论