效果展示
在这里插入图片描述
直接将代码复制粘贴即可
js代码
import Toast from "../../../miniprogram_npm/@vant/weapp/toast/toast";
// pages/contact/contact.js
const app = getApp();
var inputVal = '';
var msgList = [];
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
/**
* 初始化数据
*/
function initData(that) {
msgList = [{
speaker: 'server',
contentType: 'text',
content: '你好，康医生。',
},
{
speaker: 'customer',
contentType: 'text',
content: '你好，请问您需要咨询什么业务呢。'
},
{
speaker: 'server',
contentType: 'text',
content: '这俩天肚子不舒服。',
},
]
that.setData({
msgList,
inputVal
})
}
Page({
/**
* 页面的初始数据
*/
data: {
scrollHeight: '100vh',
inputBottom: 0,
value:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
initData(this);
console.log(app.globalData.userInfo);
this.setData({
cusHeadIcon: app.globalData.userInfo,
});
wx.pageScrollTo({
scrollTop: 630,//滚动的页面高度
duration: 300
})
},
//页面自动滚动到底部
pageScrollToBottom:function(){
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 获取聚焦
*/
focus: function (e) {
console.log(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);
},
// 输入框的值
doInput:function (e) {
console.log(e);
this.setData({
value: e.detail.value.replace(/\s+/g,"")
})
},
//失去聚焦(软键盘消失)
blur: function (e) {
console.log(e);
this.setData({
scrollHeight: '100vh',
inputBottom: 0 + "px"//失去焦点后软键盘消失，输入框复位
})
this.setData({
toView: 'msg-' + (msgList.length - 1)
})
},
// 点击发送事件
sendClicks: function (e) {
// debugger
console.log(this.data.value);
console.log(e);
if(this.data.value == "" || this.data.value == undefined){
Toast("输入不能为空")
}else{
setTimeout(res=>{
msgList.push({
speaker: 'customer',//角色区分
contentType: 'text',
content: this.data.value//输入框的值
})
this.setData({
msgList,
inputVal:'',//发送清空输入框
value:''
});
// 页面滚动的高度消息自动置低
// #scroll-view'最大页面的盒子
wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function(rect){
console.log(rect.height);
wx.pageScrollTo({
scrollTop: rect.height
});
}).exec()
},1)
}
},
/**
* 发送点击监听
*/
})
html代码
<!--pages/contact/contact.wxml-->
<view>
<scroll-view id="scroll-view" scroll-y scroll-into-view='{{toView}}' style='height: {{scrollTop}};'>
<!-- <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='https://img0.baidu.com/it/u=2727196132,2350177956&fm=26&fmt=auto'></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='' 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='' mode='widthFix'></image>
</view>
<view style='width: 11vw; height: 11vw;'>
<image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='https://img0.baidu.com/it/u=2462201143,1752996033&fm=26&fmt=auto'></image>
</view>
</view>
</block>
<!-- </view> -->
<!-- 占位 -->
<view style='width: 100%; height: 18vw;'></view>
</scroll-view>
<view class='inputRoom' style='bottom: {{inputBottom}}'>
<input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindinput="doInput" bindblur="blur" ></input>
<view class="container" bindtap="sendClicks"><text class="iconfont icon-fasong"></text></view>
</view>
</view>
<view>
<van-toast id="van-toast" />
</view>
css代码
/* 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;
}
.container {
width: 117rpx;
height: 30rpx;
line-height: 12rpx;
padding: 0;
position: absolute;
bottom: 33rpx;
right: -10rpx;
}
.iconfont {
font-size: 57rpx;
padding-right: 10rpx;
}
新建了个群，欢迎大家一起进群讨论459358760
