Taro关于多个数组同时根据时间展示倒计时的代码组件

本文主要是介绍Taro关于多个数组同时根据时间展示倒计时的代码组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们通常在做秒杀活动时，会有活动开始或者活动结束倒计时
而在活动列表中，需要做统一处理
以下为做的关于倒计时的组件~

primaryColor可忽略，是关于倒计时时间的主题色
startTime活动开始时间
endTime活动结束时间
refresh方法为其中一个倒计时结束后，页面的重新渲染方法，经常是重新请求列表接口，方法自定义

组件文件

import React, { Component, CSSProperties } from 'react';
import { View } from '@tarojs/components';
import { isFunction } from 'lodash-es';
import { hexToRgba, iosTimeStringFomat } from '@/application/utils/format';
import './index.scss';interface PaymentRewardCountdownProps {primaryColor: string;startTime: string;endTime: string;refresh(): void;
}
interface PaymentRewardCountdownState {timeRemaining: TimeRemaining | null;
}
interface TimeRemaining {type: 'start' | 'end' | 'ended';value: number;
}export default class PaymentRewardCountdown extends Component<PaymentRewardCountdownProps,PaymentRewardCountdownState
> {constructor(props: PaymentRewardCountdownProps) {super(props);this.state = {timeRemaining: null};}componentDidMount(): void {const { startTime, endTime, refresh } = this.props;const iosStartTime = iosTimeStringFomat(startTime);const iosEndTime = iosTimeStringFomat(endTime);this.timer = setInterval(() => {const now = new Date();const start = new Date(iosStartTime);const end = new Date(iosTimeStringFomat(iosEndTime));if (now < start) {const diff = start.getTime() - now.getTime();this.setState({ timeRemaining: { type: 'start', value: diff } });} else if (now < end) {const diff = end.getTime() - now.getTime();this.setState({ timeRemaining: { type: 'end', value: diff } });} else {this.setState({ timeRemaining: { type: 'ended', value: 0 } });clearInterval(this.timer);if (isFunction(refresh)) {refresh();}}}, 1000);}componentWillUnmount() {if (this.timer) {clearInterval(this.timer);}}private timer: NodeJS.Timeout;private renderCountdown = () => {const { primaryColor } = this.props;const { timeRemaining } = this.state;if (!timeRemaining) {return null;}const numberStyle: CSSProperties = {color: primaryColor,background: `${hexToRgba(primaryColor, 0.5)}`};const timeInfo = formatSeconds(timeRemaining.value / 1000);return (<View className={classes.right}><View className={classes.prefix}>{timeRemaining.type === 'start' ? '距离开始' : '距离结束:'}：</View><View className={classes.number} style={numberStyle}>{timeInfo.days}</View><View className={classes.symbol}>天</View><View className={classes.number} style={numberStyle}>{timeInfo.hours}</View><View className={classes.symbol}>时</View><View className={classes.number} style={numberStyle}>{timeInfo.minutes}</View><View className={classes.symbol}>分</View><View className={classes.number} style={numberStyle}>{timeInfo.seconds}</View><View className={classes.symbol}>秒</View></View>);};render() {return <View className={prefix}>{this.renderCountdown()}</View>;}
}const prefix = 'payment-reward-countdown';
const classes = {right: `${prefix}__right`,prefix: `${prefix}__right__prefix`,number: `${prefix}__right__number`,symbol: `${prefix}__right__symbol`
};
interface DataInfo {days: number;hours: string;minutes: string;seconds: string;
}
function addLeadingZero(num: number): string {if (num < 10) {return `0${num}`;}return num.toString();
}
function formatSeconds(time: number): DataInfo {const days = Math.floor(time / (3600 * 24));const hours = addLeadingZero(Math.floor((time % (3600 * 24)) / 3600));const minutes = addLeadingZero(Math.floor((time % 3600) / 60));const seconds = addLeadingZero(Math.floor(time % 60));return {days,hours,minutes,seconds};
}

样式文件

.payment-reward-countdown {display: flex;flex-direction: row;align-items: center;justify-content: space-between;&__right {height: 32px;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;&__prefix {font-size: $font-size-mini;}&__number {padding: 0 6px;height: 32px;font-weight: 500;font-size: 22px;color: #FF3B30;line-height: 32px;text-align: center;background: rgba(255,59,48,0.05);border-radius: 4px;}&__symbol {padding: 0 6px;color: #666666;line-height: 28px;text-align: center;font-size: 20px;font-weight: bold;}}
}

在数组的item文件中，直接调用时间组件

<PaymentRewardCountdownstartTime={market.startTime}endTime={market.endTime}refresh={this.refresh}primaryColor={primaryColor}/>

示例图

这篇关于Taro关于多个数组同时根据时间展示倒计时的代码组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---