<–wxml
**
<!-- 单个消息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/doctor.png'></image>
</view>
<view style='width: 8vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
<image style='width: 4vw;' src='' 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 style='display: flex; justify-content: flex-end;flex-wrap:wrap;flex-direction:column; padding: 2vw 2vw 2vw 11vw;'>
<text wx:if='{{item.contentType}}' class='rightMsg'>{{item.content}}</text>
<image wx:else class='rightP' src='{{item.image}}' mode='widthFix' data-index="{{index}}" bindtap="previewImage"></image>
</view>
<view style='width: 11vw; height: 11vw; margin: 2vw 4vw 2vw; display: flex; align-items: center; z-index: 9;'>
<image style='width: 11vw;' src='/images/huan.jpg' mode='widthFix' ></image>
</view>
</view>
</block>
<!-- </view> -->
<!-- 占位 -->
<view style='width: 100%; height: 18vw;'><image src='{{img_arr}}'></image></view>
![](/images/tup.jpg)
`<------------------------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;
}
.rightP{
width:22vw;
}
**
<----------------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: '我怕是走错片场了...',
image: [],
}
]
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({})
},
//图片
sendImage: function() {
var that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function(res) {
msgList.push({
speaker: 'customer',
mode: 'scaleToFill',
image:res.tempFilePaths,
})
that.setData({
msgList,
inputVal
});
},
fail: function (res) {
// fail
},
complete: function (res) {
// complete
}
})
},
previewImage: function (e) {
var index = e.currentTarget.dataset.index;
wx.previewImage({
//数据源
urls:this.data.msgList[index].image
})
}
})