仿微信聊天-时间间隔五分钟

需求：

时间显示规则：
5分钟内的消息显示同一个时间，超过5分钟间隔的每条都显示时间（以显示的时间开始计算5分钟，和目前的IM时间显示规则保持一致）

/*** 聊天时间格式化* 规则：*  1. 每五分钟为一个跨度*  2. 今天显示，小时:分钟，例如：11:12*  3. 昨天显示，昨天 小时:分钟 例如：昨天 11:12*  4. 一周内显示，星期几 小时:分钟 例如：星期四 11:12*  5. 日期差大于一周显示，年月日 小时:分钟 例如：2021年9月30日 11:12* @param currentMessageList 传入的当前会话数组* @param sort 传入数组排序：0-数组时间倒序；1-数组时间正序* @param type 五分钟规则区分：0-永远跟上一个显示的时间对比是否超5分钟 ；1-永远两条消息对比是否超5分钟* @returns {Array|null}*/
export function msgTimeFormat(currentMessageList, sort, type) {// console.log('传入的会话数组', currentMessageList)const newMessageList = []const currentFilterList = currentMessageList.filter((item) => {return item.type !== 'showTime'})currentFilterList.forEach((item, index) => {const date = new Date(item.time * 1000)let showTimeif (index === 0) {//第一条必显示时间showTime = timestampFormat(date, '-', true)newMessageList.push({payload: {text: showTime},type: 'showTime',//超五分钟显示时间-标识time: item.time})newMessageList.push(item)} else if (index <= currentFilterList.length - 1) {const current = currentFilterList[index].timelet minutesconst showTimeList = newMessageList.filter((item) => {return item.type === 'showTime'})const lastShowTime = showTimeList[showTimeList.length - 1].time//添加的时间且最后一条，用于对比if (type) {const prev = currentFilterList[index - 1].timeminutes = (current - prev) / 60}if (!sort) {minutes = (current - lastShowTime) / 60} else {minutes = (lastShowTime - current) / 60}//超五分if (minutes > 5) {showTime = timestampFormat(date, '-', true)newMessageList.push({payload: {text: showTime},type: 'showTime',time: item.time})newMessageList.push(item)} else {newMessageList.push(item)}}})// console.log('最后得到的数组', newMessageList)return newMessageList
}

仿微信聊天-时间间隔五分钟相关推荐

js封装毫秒时间戳转换仿微信聊天时间显示格式
js封装毫秒时间戳转换仿微信聊天时间显示格式先把微信的时间显示规则拍上来微信聊天消息时间显示说明 1.当天的消息,以每5分钟为一个跨度的显示时间: 2.消息超过1天.小于1周,显示星期+收发消息的 ...
php写的微信聊天界面,Android_Android高仿微信聊天界面代码分享，微信聊天现在非常火，是因其 - phpStudy...
Android高仿微信聊天界面代码分享微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先 ...
java 简单仿微信聊天(springboot)
采用springboot netty 简单模仿微信聊天界面和功能. 系统模块:包括手机app端,后台服务端技术架构: 手机app:Html5+,开发工具HBuilderX 后台服务:springbo ...
HTML5仿微信聊天界面、微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块左右触摸滑屏切换,聊天 ...
android格式化时间中文版,Android 仿微信聊天时间格式化显示功能
本文给大家分享android仿微信聊天时间格式化显示功能. 在同一年的显示规则: 如果是当天显示格式为 HH:mm 例:14:45 如果是昨天,显示格式为昨天 HH:mm 例:昨天 13:12 如果 ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈
今天给大家分享的是 RN 聊天室项目,基于 react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术实 ...

仿微信聊天-时间间隔五分钟

仿微信聊天-时间间隔五分钟相关推荐

最新文章

热门文章