uniapp 开发小程序一个页面多个倒计时

效果图

封装方法

// times.js

export function countDownFun(time) {
	//当前时间戳
	let timestamp = new Date().getTime()
	let times = time - timestamp
	let playTime,
		day = 0,
		hour = 0,
		minute = 0,
		second = 0; //时间默认值
	if (times > 0) {
		second = Math.floor(times / 1000); //未来时间距离现在的秒数
		day = Math.floor(second / 86400); //整数部分代表的是天；一天有24*60*60=86400秒 ；
		second = second % 86400; //余数代表剩下的秒数；
		hour = Math.floor(second / 3600); //整数部分代表小时；
		second %= 3600; //余数代表 剩下的秒数；
		minute = Math.floor(second / 60);
		second %= 60;
	}
	//不足两位时添加0
	if (day <= 9) day = '0' + day;
	if (hour <= 9) hour = '0' + hour;
	if (minute <= 9) minute = '0' + minute;
	if (second <= 9) second = '0' + second;

	if (day > 0) {
		playTime = `${day}天${hour}小时${minute}分钟${second}秒`;
	}
	if (day <= 0 && hour > 0) {
		playTime = `${hour}小时${minute}分${second}秒`;
	}
	if (day <= 0 && hour <= 0) {
		playTime = `${minute}分钟${second}秒`;
	}
	return playTime
}

调用方法

<template>
   <view>
   		<view v-for="(item, index) in times" :key="index">{{ item.currentTime }}</view>
   </view>
</template>

import { countDownFun } from '../../commom/times.js';

export default {
   data() {
   	return {
   		times: [
   			{
   				haveTime: '1599917668000'
   			},
   			{
   				haveTime: '1599817668000'
   			}
   		]
   	};
   },
   onLoad() {
   		this.timer(this.times);
   },
   methods: {
   		timer(times) {
   			let that = this;
   			setInterval(() => {
   				times.forEach((item, index) => {
   					//关键点 
   					item.haveTime--;  					
   					that.$set(item, 'currentTime', countDownFun(item.haveTime));
   				});
   			}, 1000);
   		}
   }
};
</script>

在页面渲染完成之后，对data里的某个数组或对象进行新增、删除属性是监听不到的，视图不会更新，需要使用this.$set()更新视图。

this.$set(target, key, value)
target: 要更改的数据源(可以是一个对象或者数组)
key: 要更改的属性(字段)
value: 新增的值

删除属性可以使用

this.$delete(target,key)

转载于这篇文章