场景用于单聊群聊、在线客服的聊天对话等
一、布局圈点
1、三角箭头
绘制一个26rpx*26rpx矩形,使它旋转45度,然后隐去对半,形成气泡上的直角三角形。
2、flex-flow改变流动方向
分别取值['row' | 'row-reverse'],实现对方发来的消息头像居左,自己发的消息头像居右。
3、按住说话悬浮层水平与垂直居中
方案1,js手工计算
方案2,纯css
经过对比,方案2要优于方案1
JS圈点
一、touch事件实现上滑取消语音输入
按下出现悬浮,上滑到超过一定位移出现取消提示,松手取消;上滑未超过,松手发送
二、发送消息完毕滚到页尾
在线体验
源码下载
关注订阅号【黄秀杰】或扫一扫下方二维码,回复关键字115
领取专属 10元无门槛券
私享最新 技术干货