uniapp实现聊天时间格式化,每五分钟为一个跨度,今天显示,小时:分钟,例如:11:12,昨天显示,昨天 小时:分钟 例如:昨天 11:12,一周内显示,星期几 小时:分钟 例如:星期四 11:12,日期差大于一周显示,年月日 小时:分钟 例如:2021年9月30日 11:12 详细实现方式
时间: 2024-04-21 15:22:29 浏览: 23
在Uniapp中实现聊天时间的格式化可以按照以下步骤进行操作:
1. 创建一个时间格式化函数,接收一个时间戳作为参数。
```javascript
function formatChatTime(timestamp) {
const now = new Date(); // 当前时间
const messageTime = new Date(timestamp); // 消息发送时间
const oneMinute = 60 * 1000; // 一分钟的毫秒数
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
const daysDiff = Math.floor((now.getTime() - messageTime.getTime()) / oneDay); // 计算日期差
// 格式化小时和分钟为两位数
const formatNum = (num) => {
return num < 10 ? '0' + num : num;
};
// 格式化时间为 HH:mm
const formatTime = (time) => {
return `${formatNum(time.getHours())}:${formatNum(time.getMinutes())}`;
};
if (daysDiff === 0) {
// 今天显示,小时:分钟
return formatTime(messageTime);
} else if (daysDiff === 1) {
// 昨天显示,昨天 小时:分钟
return `昨天 ${formatTime(messageTime)}`;
} else if (daysDiff <= 7) {
// 一周内显示,星期几 小时:分钟
const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return `${weekday[messageTime.getDay()]} ${formatTime(messageTime)}`;
} else {
// 日期差大于一周显示,年月日 小时:分钟
const year = messageTime.getFullYear();
const month = messageTime.getMonth() + 1;
const day = messageTime.getDate();
return `${year}年${month}月${day}日 ${formatTime(messageTime)}`;
}
}
```
2. 在聊天界面中,使用上述函数对消息的时间进行格式化。
```html
<template>
<view>
<view v-for="message in messages" :key="message.id">
<text>{{ formatChatTime(message.timestamp) }}</text>
<text>{{ message.content }}</text>
</view>
</view>
</template>
```
3. 在发送消息的逻辑中,获取当前时间戳,并使用定时器在5分钟后发送消息携带时间。
```javascript
// 发送消息逻辑
function sendMessage(content) {
const timestamp = Date.now(); // 获取当前时间戳
// 发送消息操作...
// 5分钟后发送携带时间的消息
setTimeout(() => {
const formattedTime = formatChatTime(timestamp); // 格式化时间
sendTimedMessage(content, formattedTime); // 发送携带时间的消息
}, 5 * 60 * 1000);
}
```
这样就可以实现在Uniapp聊天界面中对消息时间进行格式化,满足每五分钟为一个跨度的要求,并根据不同的时间差显示不同的时间格式。
请根据您的实际需求和代码架构进行适当的修改和调整。