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

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

下面先来看看效果

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

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:

{{item.content}}

{{item.content}}

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;

}

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