更新记录

2.0(2019-11-18)

修复部分同学反馈的跳两秒问题,如果还有问题,请提供复现代码片段

1.0(2019-09-17)

修复了官方倒计时组件不能动态更改时间的问题. 方案是: 1. 在自定义组件中添加了一个reset属性

  1. watch监听reset属性
  2. reset属性变化时重新设置时间 使用方法: 在设置时间前, 先设置reset属性即可.

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

CountDown 倒计时

倒计时组件,组件名:uni-countdown,代码块: uCountDown。

使用方式:

script 中引用组件

import uniCountdown from "@/components/linnian-CountDown/uni-countdown.vue"
export default {
    components: {uniCountdown}
}

view中

<uni-countdown :show-day="false" :hour="0" :minute="minute" :second="0" :reset="reset" @timeup="timeUp"> </uni-countdown>

然后在data中声明

        data() {
            return {
                minute: 0,
                reset: false,
            }
        },

假如此时想更改分钟数

onload(){
    //我的项目中只赋值一次, 所以直接设为true了
    this.reset = !this.reset;
    //如果还要设置天, 时, 秒, 在上面声明绑定后, 在这里赋值即可
    this.minute = 30;
}

不显示天数

<uni-countdown 
    :show-day="false" 
    :hour="12" 
    :minute="12" 
    :second="12" :reset="false">
</uni-countdown>

修改颜色

<uni-countdown 
    color="#FFFFFF" 
    background-color="#00B26A" 
    border-color="#00B26A" 
    :day="1" 
    :hour="2" 
    :minute="30" 
    :second="0" :reset="false">
</uni-countdown>

实际效果参考:https://github.com/dcloudio/uni-ui

uniCountDown 属性说明:

属性名 类型 默认值 说明
background-color String #FFFFFF 背景色
border-color String #000000 边框颜色
color String #000000 文字颜色
splitor-color String #000000 割符号颜色
day Number 0 天数
hour Number 0 小时
minute Number 0 分钟
second Number 0
show-day Boolean true 是否显示天数
show-colon Boolean true 是否以冒号为分隔符

uniCountDown 事件说明:

事件称名 说明 返回参数
timeup 倒计时时间到触发事件 -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问