后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面
由于uniapp是基于vue的,所以对于时间的处理。我们也可以用到
过滤器。
1:在uniapp的项目的static目录底下,新建一个test.json文件,
test.json里面写好模拟数据(未处理的时间戳)
{
"time":"1588061853944"
}
2:步骤:
写一个请求方法请求json数据,在data里面定义一个数组,将请求成功的数据赋值给数组,然后再渲染的view里面,这个步骤就不多说了,常规操作哦。
这里要用到filters过滤的方法,时间戳的处理其实和jquery里面用到的是一样的。
<view class="text-cut">
{{timeArray.time | formatDate}}
</view>
//时间戳的处理
filters: {
formatDate: function(value) {
var date = new Date();
//date.setTime(value);
var month = date.getMonth() + 1;
var hours = date.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = date.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
" " + hours + ":" + minutes;
return time;
}
},
3:完整的示例代码如下index.vue
<template>
<view>
<view class="text-cut">
{{timeArray.time | formatDate}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
timeArray: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: "../../static/test.json",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
this.timeArray = res.data;
},
// fail: function (err) {
// console.log("服务器繁忙")
// }
});
},
},
//时间戳的处理
filters: {
formatDate: function(value) {
var date = new Date();
//date.setTime(value);
var month = date.getMonth() + 1;
var hours = date.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = date.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
" " + hours + ":" + minutes;
return time;
}
},
}
</script>
<style>
</style>
4:显示结果如下