仿微信消息时间显示

最新推荐文章于 2024-05-17 16:45:39 发布

张可爱呀--

最新推荐文章于 2024-05-17 16:45:39 发布

阅读量407

点赞数 6

文章标签：微信小程序

本文链接：https://blog.csdn.net/m0_60207396/article/details/136350363

版权

该篇文章介绍了如何在前端使用JavaScript实现聊天消息的循环展示，并详细描述了showTime方法来判断是否显示时间差，以及formatChatTime和dateFormat方法用于转换时间格式以适应不同的显示需求。

摘要由CSDN通过智能技术生成

1、标签，循环消息

<view :id="'msg' + index" class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" >

	<view class="chat-time" v-if="showTime(item.createTime,index)">{{showTime(item.createTime,index)}}</view>
		<view class="msg-m msg-left" >
			<view class="message" >
				<view class="msg-text">{{item.sendText}}</view>
			</view>		
		</view>

	</view>
</view>

2、showTime方法用来判断时间是否显示，以及显示格式

function showTime(time, index) {
		let last_index = index - 1;
		if (last_index >= 0) {
			// 上一个时间的时间戳
			let last_time = new Date(unshiftmsg.value[last_index]['createTime']).getTime();
			// 把当前消息时间的减去上一个消息的时间
			let difference = parseInt(new Date(time).getTime().toString().slice(0, -3)) - parseInt(last_time.toString().slice(0, -3));			
			if (difference < 60) {
				return false;
			} else {
				// 时间格式
				return dateTime.formatChatTime(time)
			}
		} else {
			return dateTime.formatChatTime(time)
		}
	}

3、转换时间格式方法

formatChatTime(time) {
		time = this.dateFormat("YY-mm-dd HH:MM:SS", new Date(time));
		var date = time.toString();
		var year = date.split("-")[0];
		var month = date.split("-")[1];
		var day = date.split("-")[2];
		var d1 = new Date(year + '/' + month + '/' + day.split(" ")[0]);
		var d3 = new Date(date.replace(/-/g, "/"));
		var dd = new Date();
		var y = dd.getFullYear();
		var m = dd.getMonth() + 1;
		var d = dd.getDate();
		var d2 = new Date(y + '/' + m + '/' + d);
		var iday = parseInt(d2 - d1) / 1000 / 60 / 60 / 24;
		var hours = d3.getHours();
		var minutes = d3.getMinutes();
		if (minutes < 10) {
			minutes = '0' + minutes;
		}
		if (hours < 10) {
			hours = '0' + hours;
		}
		if (iday == 0) {
			if (hours >= 12) {
				return "下午 " + hours + ":" + minutes;
			} else {
				return "上午 " + hours + ":" + minutes;;
			}
		} else if (iday == 1) {
			var dt = "";
			if (hours >= 12) {
				dt = "下午 " + hours + ":" + minutes;
			} else {
				dt = "上午 " + hours + ":" + minutes;;
			}
			return "昨天 " + dt;
		} else if (iday == 2) {
			var dt = "";
			if (hours >= 12) {
				dt = "下午 " + hours + ":" + minutes;
			} else {
				dt = "上午 " + hours + ":" + minutes;;
			}
			return "前天 " + dt;
		} else {
			return year + '/' + month + "/" + d1.getDate()
		}
	},
	
	dateFormat(fmt, date) {
		let ret;
		const opt = {
			"Y+": date.getFullYear().toString(), // 年
			"m+": (date.getMonth() + 1).toString(), // 月
			"d+": date.getDate().toString(), // 日
			"H+": date.getHours().toString(), // 时
			"M+": date.getMinutes().toString(), // 分
			"S+": date.getSeconds().toString() // 秒
		};
		for (let k in opt) {
			ret = new RegExp("(" + k + ")").exec(fmt);
			if (ret) {
				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			};
		};
		return fmt;
	}