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

2024-04-01 12:28

本文主要是介绍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关于多个数组同时根据时间展示倒计时的代码组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/867160

相关文章

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结:三

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》:本文主要介绍在Python中获取命令行(cmd)环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中,总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例:使用pandas.concat合并数据默认的concat:参数axis=0,join=