uniapp仿微信时间显示
文章描述：
uniapp仿微信聊天时间显示样式，时间格式为当天、昨天、今年、大于今年
template
<template>
<view class="content">
<view class="time" v-for="(item,index) in list" :key="index">
{{changeTime(item.time)}}
</view>
</view>
</template>script
在一个数组里面存放了时间，这里的1000表示1秒钟，60*60表示一分钟60秒和一个小时60分钟，24表示一天的时间。
import fun from '../../commons/js/fun.js'
export default{
data(){
return{
list:[
{time:new Date() - 1000*60*60*24*388}, // 1年前
{time:new Date() - 1000*60*60*24*10}, // 10天前
{time:new Date() - 1000*60*60*15}, // 15小时前
{time:new Date() - 1000*60*60*5}, // 5小时前
{time:new Date() - 1000*60*60*1}, // 1小时前
{time:new Date()}, // 当前时间
]
}
},
methods:{
// 处理时间
changeTime:function(date){
return fun.dateTime(date)
},
}
}style
page{
height: 100vh;
}
.content{
height: 100%;
padding-top: 200rpx;
}
.time{
font-size: 12px;
color: rgba(39, 40, 50, 0.3);
line-height: 17px;
padding: 10px 0;
text-align: center;
}fun.js
里面的dateTime是对时间的处理，根据条件判断是否为当天时间、昨天时间、当月、今年、大于今年等。
export default{
// 时间转化
dateTime(e){
let old = new Date(e)
let now = new Date()
// 获取old具体时间
let d = old.getTime() // 时间戳
let h = old.getHours() // 时
let m = old.getMinutes() // 分
let Y = old.getFullYear() // 年
let M = old.getMonth() // 月
let D = old.getDate() // 日
// 获取now具体时间
let nd = now.getTime()
let nh = now.getHours()
let n = now.getMinutes()
let nY = now.getFullYear()
let nM = now.getMonth()
let nD = now.getDate()
// 当天的时间
if(D === nD && M === nM && Y === nY){
if(h<10){
h = '0'+h;
}
if(m<10){
m = '0'+m;
}
return h + ':' + m
}
// 昨天时间
if(D+1 === nD && M === nM && Y === nY){
if(h<10){
h = '0'+h;
}
if(m<10){
m = '0'+m;
}
return '昨天' + h + ':' + m
}else if(Y === nY){
// 今年
if(h<10){
h = '0'+h;
}
if(m<10){
m = '0'+m;
}
return M + '月' + D + '日' + h + ':' + m
}else{
// 大于今年
if(h<10){
h = '0'+h;
}
if(m<10){
m = '0'+m;
}
return Y +'年'+ M + '月' + D + '日' + h + ':' + m
}
// return Y+'-'+M+'-'+D+' ' + h +':' +m
}
}
发布时间：2022/09/22
发表评论