uni-app实现秒杀循环商品倒计时效果

先看看效果吧

先在components里面建一个countdown组件

countdown.vue

<template>
	<view class="uni-countdown">
		<!-- <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text> -->
		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
	</view>
</template>
<script>
	/**
	 * Countdown 倒计时
	 * @description 倒计时组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
	 * @property {String} backgroundColor 背景色
	 * @property {String} color 文字颜色
	 * @property {Number} day 天数
	 * @property {Number} hour 小时
	 * @property {Number} minute 分钟
	 * @property {Number} second 秒
	 * @property {Boolean} showDay = [true|false] 是否显示天数
	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
	 * @property {String} splitorColor 分割符号颜色
	 * @event {Function} timeup 倒计时时间到触发事件
	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
	 */
	export default {
		name: 'UniCountdown',
		props: {
			showDay: {
				type: Boolean,
				default: true
			},
			showColon: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			borderColor: {
				type: String,
				default: '#000000'
			},
			color: {
				type: String,
				default: '#000000'
			},
			splitorColor: {
				type: String,
				default: '#000000'
			},
			day: {
				type: Number,
				default: 0
			},
			hour: {
				type: Number,
				default: 0
			},
			minute: {
				type: Number,
				default: 0
			},
			second: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				timer: null,
				syncFlag: false,
				d: '00',
				h: '00',
				i: '00',
				s: '00',
				leftTime: 0,
				seconds: 0
			}
		},
		watch: {
			day(val) {
				this.changeFlag()
			},
			hour(val) {
				this.changeFlag()
			},
			minute(val) {
				this.changeFlag()
			},
			second(val) {
				this.changeFlag()
			}
		},
		created: function(e) {
			this.startData();
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			toSeconds(day, hours, minutes, seconds) {
				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
			},
			timeUp() {
				clearInterval(this.timer)
				this.$emit('timeup')
			},
			countDown() {
				let seconds = this.seconds
				let [day, hour, minute, second] = [0, 0, 0, 0]
				if (seconds > 0) {
					day = Math.floor(seconds / (60 * 60 * 24))
					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
				} else {
					this.timeUp()
				}
				if (day < 10) {
					day = '0' + day
				}
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				this.d = day
				this.h = hour
				this.i = minute
				this.s = second
			},
			startData() {
				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
				if (this.seconds <= 0) {
					return
				}
				this.countDown()
				this.timer = setInterval(() => {
					this.seconds--
					if (this.seconds < 0) {
						this.timeUp()
						return
					}
					this.countDown()
				}, 1000)
			},
			changeFlag() {
				if (!this.syncFlag) {
					this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
					this.startData();
					this.syncFlag = true;
				}
			}
		}
	}
</script>
<style scoped>
	.uni-countdown {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		padding: 2rpx 0;
	}

	.uni-countdown__splitor {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		line-height: 48rpx;
		padding: 5rpx;
		font-size: 24rpx;
	}

	.uni-countdown__number {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 52rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin: 5rpx;
		text-align: center;
		font-size: 24rpx;
	}
</style>

以上是组件全部代码,这里没有显示天

接下来在需要的页面引入, 这里我直接复制全部代码了

index.vue

<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
						<image :src="item.cover || errorImage" mode="widthFix"></image>
						<view class="goods-title">
							{{item.title}}
						</view>
						<view class="goods-price">
							{{item.price}}
						</view>
						<uni-countdown :backgroundColor="res" :day="item.end_times.d" :hour="item.end_times.h" :minute="item.end_times.m" :second="item.end_times.s"></uni-countdown>
					</view>

<script>
    import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
    export default {
        components: {
			uniCountdown
		},
        data() {
			return {
                recommendList: [ // 惠多推荐
					{
						title: "惠多多",
						cover: "",
						price: "1.00",
						end_time: "1604142069000"
					},
					{
						title: "惠多多",
						cover: "",
						price: "1.00",
						end_time: "1604055722000"
					},
					{
						title: "惠多多",
						cover: "",
						price: "1.00",
						end_time: "1604142069000"
					},
					{
						title: "惠多多",
						cover: "",
						price: "1.00",
						end_time: "1604142069000"
					}
				]
                
            }
            
        },
        onLoad() {
            this.init()  
        },
        methods: {
            init() {
				var date = new Date().getTime();
				let recommendList = this.recommendList;
				recommendList.forEach((item, index) => {
					var leftTime = item.end_time - date; //计算两日期之间相差的毫秒数
					if (leftTime >= 0) {
						let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						let m = Math.floor(leftTime / 1000 / 60 % 60);
						let s = Math.floor(leftTime / 1000 % 60);
						item.end_times = {
							d: d,
							h: h,
							m: m,
							s: s
						}
					}
				})
				this.recommendList = recommendList
			}        
        }
    }
</script>

以上就是所有代码, 我自己的需求,做个记录,分享一下

注: 时间戳计算毫秒

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序