微信小程序实现仿微信聊天界面(各种细节处理)
话不多说,美图镇楼:
下面先来看看效果
为实现这样的效果,首先要解决两个问题:
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;
}
转自https://blog.csdn.net/java558/article/details/86001064?utm_source=distribute.pc_relevant.none-task
微信小程序实现仿微信聊天界面(各种细节处理)相关推荐
- 微信小程序】仿京东商品分类界面
微信小程序]仿京东商品分类界面 要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化 ...
- 漂流瓶php源码,微信小程序之仿微信漂流瓶
[实例简介] 微信小程序之仿微信漂流瓶 [实例截图] [核心代码] a4c6f919-add7-4dc7-bafa-9a884a00f2e3 └── wx_plp ├── app.js ├── app ...
- 微信小程序中百分百实现聊天界面
众所周知,全网来看,微信的聊天界面看着就是舒服,那能否在微信小程序中实现该功能,同时可以实现输入文本和语音功能,而且在输入文本时,键盘可以弹起.话不多说,上界面看看. wxml实现如下: < ...
- 微信小程序之仿微信漂流瓶
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音 ...
- linux脚本漂流瓶,微信小程序之仿微信漂流瓶实例
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 下面带图说模块: 1.主页面 三个 ...
- 微信小程序实现仿微信聊天界面
实现过程容易出现的问题 1.输入完内容之后页面没有自动滚动到页面底部 2.输入内容时候,原有的记录内容不会显示,被遮挡了 3.点击按钮发送(完成),需要点击两次才清空input内容(第一次是失去焦点, ...
- 【微信小程序】仿京东商品分类界面
图示:(京东左) 要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化,且默认显示在 ...
- 微信小程序之目前为止史上最全的微信小程序项目实例, 微信小程序实战学习
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室 项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值 连接知识图谱 你还在为因为性格腼 ...
最新文章
- 每日一皮:资深老鸟看实习生写代码...
- python 正则表达式re 模块的使用
- php自定义模块,简单介绍OpenCart自定义模块
- [转载]一个游戏程序员的学习资料
- centos 6.5网卡dhcp不能获得网关
- 大学数学建模大赛是用计算机,北京大学第十届“江泽涵杯”数学建模与计算机应用竞赛试题...
- Mysql怎么把8位数变成日期_SQL中如何将数字型转换为日期型
- Unicode – CSS中文字体转编码
- maven下载,安装与eclipse中maven配置
- matlab2c使用c++实现matlab函数系列教程-sort函数
- 为什么要使用 JavaScript
- c语言遗传算法实例ppt,遗传算法的C语言程序案例.doc
- 跟我学制作javaEE网上书店销售管理系统(沙箱支付)springboot+vue
- 如何让U盘对病毒免疫
- 重定向和请求转发详解
- 2021年特种设备气瓶充装(全国特种设备-P气瓶充装模拟考试题库一)安考星
- 用c++编写别踩白块儿小游戏
- dis的前缀单词有哪些_前缀dis-(dif-,di-) = apart;to undo;lack of,to remove;not
- 车管所免检测审车流程
- R语言,导入XLSX的Excel数据 多sheet
热门文章
- 【极限精度】基于stm32f4xx的蜂鸣器音乐播放(生日快乐)及国际绝对音名标准频率定义(32位无符号整型精度、十二等律体系、A4=440.01000Hz)
- 初识MIMO(四):MIMO的接收端检测技术及其仿真
- 中国教育资助网“益行天下”大型公益学子资助活动启动
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十九)
- 转战物联网·基础篇13-了解物联网之物连接相关通信技术(2)
- 上市公司绿色专利申请数据(绿色创新数据1)(1990-2021)
- 软件测试 | 测试开发 | Git实战(四)| Git分支管理实操,在线合并和本地合并
- 数据库截取某一字段的值
- 九度OJ-1163:素数(未关联)
- 美国大学计算机牛校简介