前端vue uni-app cc-countdown倒计时组件
随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间可以随意的进行组合。大大提升了开发的效率,降低了维护的成本。
在本文中,我们将介绍如何在uni-app中使用cc-countdown组件。cc-countdown是一个倒计时组件,它可以显示剩余时间、天数、小时数、分钟数和秒数。用户可以通过设置不同的属性来定制倒计时的外观和行为。 附源码下载地址:https://ext.dcloud.net.cn/plugin?id=13819
效果图如下:
使用方法
首先,我们需要在uni-app项目文件中引入cc-countdown组件,并通过属性对其进行配置。下面是一个示例:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
在上述代码中,我们可以看到cc-countdown组件有以下属性:
-
color
:文字颜色,默认为白色。 -
background-color
:背景颜色,默认为红色。 -
splitorColor
:分割符颜色,默认为红色。 -
showColon
:是否显示冒号,默认为true(显示)。 -
showDay
:是否显示天数,默认为false(不显示)。 -
day
:要显示的天数,默认为0。 -
hour
:要显示的小时数,默认为0。 -
minute
:要显示的分钟数,默认为0。 -
second
:要显示的秒数,默认为12。 -
@timeup
:倒计时结束事件,用于处理倒计时结束后的操作。
除了上述属性外,我们还可以通过事件监听来实现自定义功能。例如,当倒计时结束时,我们可以触发一个自定义事件。下面是一个示例:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
在上述代码中,我们通过@timeup
属性监听了倒计时结束事件,并定义了一个名为timeup
的方法来处理该事件。具体的处理逻辑将在后续章节中介绍。
HTML代码实现部分
接下来,我们将展示完整的HTML代码实现部分。首先是页面的布局结构,然后是样式定义和组件的实现。
HTML代码实现部分
<template><view class="page"><view style="height: 60px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0":hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="true" :day="1":hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="true" :day="1":hour="1" :minute="12" :second="32"></cc-countdown><view style="height: 60px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="true":day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="true":day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown></view></template><script>export default {components: {},data() {return {}},methods: {// 倒计时结束timeup() {uni.showModal({title: '温馨提示',content: '倒计时结束'})}},}</script><style lang="scss" scoped>page {background-color: white;}</style>
相关文章:
前端vue uni-app cc-countdown倒计时组件
随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组…...

fifo读写的数据个数
fifo IP核设置读写个数 如果不勾选精确值,则统计的当前写入和待读出的数据为估计值,可能会相差2个左右。且fifo设计的wr_data_count. wr_data_count:当前的fifo中剩余已经写入的数据。 rd_data_count:当前的fifo中剩余可以读出…...

Java之Map接口
文章目录 简述Map中key-value特点 Map接口的常用方法Map的主要实现类:HashMapHashMap概述 Map实现类之二:LinkedHashMapMap实现类之三:TreeMapMap实现类之四:Hashtable(古老实现类)Map实现类之五࿱…...
windows系统中的命令行可以用python,pip等命令(已在系统中添加过python环境变量),但是pycharm的terminal中无法使用。
如果你已经在Windows系统中添加了Python环境变量,那么在命令行中使用python和pip命令应该是没有问题的。但是在PyCharm的Terminal中无法使用这些命令,可能是因为PyCharm的Terminal使用的是自己的虚拟环境,而不是系统环境。 你可以尝试在PyCh…...
编译 OneFlow 模型
本篇文章译自英文文档 Compile OneFlow Models tvm 0.14.dev0 documentation 作者是 BBuf (Xiaoyu Zhang) GitHub 更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架,适用于 CPU、GPU 和各种机器学习加速芯片。 | Apache TVM 中文站 本文介…...

【kubernetes】k8s单master集群环境搭建及kuboard部署
k8s入门学习环境搭建 学习于许大仙: https://www.yuque.com/fairy-era k8s官网 https://kubernetes.io/ kuboard官网 https://kuboard.cn/ 基于k8s 1.21.10版本 前置环境准备 一主两从,三台虚拟机 CPU内存硬盘角色主机名IPhostname操作系统4C16G50Gmasterk8s-mast…...

0802|IO进程线程 day5 进程概念
一、进程的基础 1.1 什么是进程 1)进程是程序的一次执行过程 程序:是静态的,它是存储在外存上的可执行二进制文件;进程:动态的概念,它是程序的一次执行过程,包括了进程的创建,调度、…...

4 Promethues监控主机和容器
目录 目录 1. 监控节点 1.1 安装Node exporter 解压包 拷贝至目标目录 查看版本 1.2 配置Node exporter 1.3 配置textfile收集器 1.4 启动systemd收集器 1.5 基于Docker节点启动node_exporter 1.6 抓取Node Exporter 1.7 过滤收集器 2. 监控Docker容器 2.1 运行cAdviso…...

亚马逊买家账号ip关联怎么处理
对于亚马逊买家账号,同样需要注意IP关联问题。在亚马逊的眼中,如果多个买家账号共享相同的IP地址,可能会被视为潜在的操纵、违规或滥用行为。这种情况可能导致账号受到限制或处罚。 处理亚马逊买家账号IP关联问题,建议采取以下步骤…...

NO4 实验四:生成Web工程
1、说明 使用 mvn archetype:generate 命令生成 Web 工程时,需要使用一个专门的 archetype。这个专门生成 Web 工程骨架的 archetype 可以参照官网看到它的用法: 2、操作 注意:如果在上一个工程的目录下执行 mvn archetype&…...

【linux】进程
文章目录 前言一、概念基本概念进程-PCBtask_structtask_struct内容分类 二、查看和创建进程查看进程PID创建进程 三、进程状态五、僵尸进程和孤儿进程僵尸进程孤儿进程获取进程退出码 四、进程优先级基本概念查看系统进程PRI and NI用top命令更改已存在进程的nice 前言 我们常…...

电商高并发设计之SpringBoot整合Redis实现布隆过滤器
文章目录 问题背景前言布隆过滤器原理使用场景基础中间件搭建如何实现布隆过滤器引入依赖注入RedisTemplate布隆过滤器核心代码Redis操作布隆过滤器验证 总结 问题背景 研究布隆过滤器的实现方式以及使用场景 前言 本篇的代码都是参考SpringBootRedis布隆过滤器防恶意流量击穿缓…...
SpringBoot第25讲:SpringBoot集成MySQL - MyBatis 注解方式
SpringBoot第25讲:SpringBoot集成MySQL - MyBatis 注解方式 本文是SpringBoot第25讲,上文主要介绍了Spring集成MyBatis访问MySQL,采用的是XML配置方式;我们知道除了XML配置方式,MyBatis还支持注解方式。本文主要介绍Sp…...

服务器返回 413 Request Entity Too Large
问题 上传一个大于1.5M的文件时,报错:413 Request Entity Too Large 使用的配置 1、用的是docker环境,还有一层代理,代理用的镜像是:jwilder/nginx-proxy 2、docker里是有php和nginx 确认配置 docker里的php和ngi…...

如何一目了然地监控远程 Linux 系统
动动发财的小手,点个赞吧! Glances 是一款免费的开源、现代、跨平台、实时 top 和类似 htop 的系统监控工具,与同类工具相比,它提供了先进的功能,并且可以在不同的模式下运行:作为独立模式、客户端/服务器模…...

9.环境对象和回调函数
9.1环境对象 指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境 作用: 弄清楚this的指向,可以让我们代码更简洁 ➢函数的调用方式不同,this指代的对象也不同 ➢[谁调用,this 就指代谁] 是判断this指向的…...
51单片机(普中HC6800-EM3 V3.0)实验例程软件分析概览
本专栏将分析普中HC6800-EM3 V3.0 (9.22)\5--实验程序\基础实验例程中的各个例程的代码。 引言:本专栏将对历程中的关键代码进行分析与拓展,再学习一遍51,记录与各位一起进步。 下面是文件列表: E:\USER\000study\000_51单片机\000普中HC6800-EM3 V3.0 (9.22)\5--实…...

ubuntu18.04 安装php7.4-xdebug
文章目录 场景解决 场景 apt install php7.4-xdebug 下载失败, 只好通过编译解决了 解决 https://xdebug.org/wizard 输入php -i的执行结果...

java 定时任务不按照规定时间执行
这里写目录标题 使用异步启动可能出现的问题排查代码中添加的定时任务步骤是否正确排查是否任务阻塞,如果定时任务出现异常阻塞后,将不会在次执行java中多个Scheduled定时器不执行为了让Scheduled效率更高,我们可以通过两种方法将定时任务变成…...

Android复习(Android基础-四大组件)—— Activity
Activity作为四大组件之首,是使用最为频繁的一种组件,中文直接翻译为"活动",不过如果被翻译为"界面"会更好理解。正常情况,除了Window,Dialog和Toast , 我们能见到的界面只有Activity。…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么?它的作用是什么? Spring框架的核心容器是IoC(控制反转)容器。它的主要作用是管理对…...
在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤: 第一步: 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为: // 改为 v…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性(Basic Attributes) 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...