后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面
由于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:显示结果如下

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐