php 小程序即时聊天,小程序组件:聊天会话组件的介绍(附代码)
本篇文章给大家带来的内容是关于小程序组件:聊天会话组件的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
场景
用于在线客服的聊天对话等
一、布局圈点
1、三角箭头
绘制一个26rpx*26rpx矩形,使它旋转45度,然后隐去对半,形成气泡上的直角三角形。
/* 三角箭头 */
.body .triangle {
background: white;
width: 20rpx;
height: 20rpx;
margin-top: 26rpx;
transform: rotate(45deg);
position: absolute;
}
2、flex-flow改变流动方向
分别取值['row' | 'row-reverse'],实现对方发来的消息头像居左,自己发的消息头像居右。
3、按住说话悬浮层水平与垂直居中
方案1,js手工计算data: {
hud_top: (wx.getSystemInfoSync().windowHeight - 150) / 2,
hud_left: (wx.getSystemInfoSync().windowWidth - 150) / 2,
}
方案2,纯css/*悬浮提示框*/
.hud-container {
position: fixed;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
经过对比,方案2要优于方案1
JS圈点
一、touch事件实现上滑取消语音输入
按下出现悬浮,上滑到超过一定位移出现取消提示,松手取消;上滑未超过,松手发送touchStart: function (e) {
// 触摸开始
var startY = e.touches[0].clientY;
// 记录初始Y值
this.setData({
startY: startY,
status: this.data.state.pressed
});
},
touchMove: function (e) {
// 触摸移动
var movedY = e.touches[0].clientY;
var distance = this.data.startY - movedY;
// console.log(distance);
// 距离超过50,取消发送
this.setData({
status: distance > 50 ? this.data.state.cancel : this.data.state.pressed
});
},
touchEnd: function (e) {
// 触摸结束
var endY = e.changedTouches[0].clientY;
var distance = this.data.startY - endY;
// console.log(distance);
// 距离超过50,取消发送
this.setData({
cancel: distance > 50 ? true : false,
status: this.data.state.normal
});
// 不论如何,都结束录音
this.stop();
},
二、发送消息完毕滚到页尾data: {
toView: ''
}
reply: {
// ...
this.scrollToBottom()
},
scrollToBottom: function () {
this.setData({
toView: 'row_' + (this.data.message_list.length - 1)
});
},
相关推荐:
php 小程序即时聊天,小程序组件:聊天会话组件的介绍(附代码)相关推荐
- 微信小程序自定义导航栏如何实现(简洁版)~内附代码
先来张效果图 实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
- mysql 手工配置_小姜学网络(MySQL数据库的手工安装与配置)附代码
完成小姜学网络(先电IaaS云平台基本环境配置二)附带完整代码中所有内容,即先电IaaS云平台基本环境配置,或者从小姜学网络(先电IaaS云平台基本环境配置一)附带完整代码的镜像开始 涉及节点: co ...
- 详细介绍附代码:使用jquery,和php文件构建一个简单的在线聊天室,通过ip显示googlemap
最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步. 首先介绍一下相关文件信息和功能 ...
- python开发微信群_Python编程:微信群聊程序的开发与进/线程知识汇总(附代码)
本文承接上篇文章的客户端-服务器聊天对话程序,进一步设计开发了微信群聊的python模拟程序,涉及的python知识点为:Python实战:聊天软件开发与TCP/Socket编程知识汇总(附代码)和 ...
- react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
- 小教活动总结-VB即时通讯小程序
昨天在壹佰参加了小教专业同学的期末教学活动,令我感触颇多. 首先我们是以助教的身份参加的,在一开始我和分配好的小组成员坐到了一起.我们组一共是9个人,经过聊天我发现她们竟然都是转专业的学生,问她们为什 ...
- javaweb通过iis实现域账号免登陆_聊天小程序的Java实现
登陆界面 注册账号 找回密码 重设密码 聊天界面 多人聊天 一. 设计任务 1.1设计意义 <Java基础入门>课程设计是对学生的一种全面综合训练,它包括问题分析,用户界面设计,程序设计基 ...
- 微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...
- 实战|轻松用 Python 开发一个简单有趣的聊天小程序
前言 Internet 协议集支持一个无连接的传输协议,该协议称为用户数据报协议(UDP,User Datagram Protocol). UDP 为应用程序提供了一种无需建立连接就可以发送封装的 I ...
最新文章
- 进入计算机用户名和密码,巧用U盘进入设密码系统免于输入用户名和登录密码...
- Java线程池原理及使用
- 交叉验证 cross validation 与 K-fold Cross Validation K折叠验证
- 将C#Lambda表达式转换为通用过滤器描述符和HTTP查询字符串
- linux 执行iso 文件,linux可以加载iso镜像文件到启动项吗
- PyTorch——torch.Tensor与np.ndarray(NumPy)之间的类型转换
- LeetCode-50:关于浮点型数字求高次幂的高效运算
- python的条件判断
- 【Matlab取整函数】
- 调度算法——时间片轮转、优先级、多级反馈队列(例题详细!!!)
- hdu4565 so easy 矩阵
- 树莓派外接扩展板的的测试
- 请问一下Android Studio如何配置JAVACV 0.8Javacv+2.4.9Opencv 万分感谢
- Android 应用市场链接上传地址
- 阿里性能专家全方位对比Jmeter和Locust,到底谁更香?
- 20皇后的不是很正确的解法
- emqx使用自制CA证书登录配置(双向认证)
- c语言xml库调用方法,c语言如何调用xml的接口函数?
- 【网页设计】收入支出表
- 麦肯锡称三年内将会发生金融AI大变革
热门文章
- java 七巧板油漆问题_七巧板的问题
- npf拒绝访问的问题
- XGBoost中如何防止过拟合
- 【mongodb】python操作mongodb
- 一个潜藏4年之久的内核bug
- iOS 10 is the maximum deployment target for 32-bit targets
- c语言求比平均值大的元素,c语言 10个元素的数组求平均值并输出比平均值大的数...
- Android自定义一个View实现运动的小人
- 海思Hi3559AV100将caffemodel转为wk文件
- 异常处理 ?处理(try-catch) :甩锅(throws)_ java异常(Exception)处理