小程序插件 — 倒计时

往往各大节日蜂拥而至,各大平台和店铺就开始大展身手,琳琅满目的促销活动随之而来,这时,就有免不了要出席的一个功能——倒计时。 今天,就为你们整理开发了一个倒计时插件,今后解决咱们对倒计时的全部需求。git

功能设计

能够知足各类形式的倒计时展现。为此,插件抛出各个形式参数,进行按需随意组合。好比,能够是单个总数形式 —— 距离还剩:years年(或days年 或hours小时 或minutes分钟 或seconds秒),也能够是 组合形式 —— 距离还剩:years 年 d 天 h 小时 m 分钟 s 秒。 完整代码呈现以下: github分享:github.com/linger777/x…github

详细说明

倒计时的时间段的设置:
  • 有两种属性:lastTime 和 startTime+endTime 。
  • lastTime的优先级较高。
  • 单位是毫秒。
回调方法有:
  • onYearChange(){}, // 年数变化时回调
  • onDayChange(){}, // 天数变化时回调
  • onHourChange(){}, // 小时变化时回调
  • onMinuteChange(){}, // 分钟变化时回调
  • onSecondChange(){}, // 秒数变化时回调
  • onFinish(){}, // 倒计时结束回调
返回的倒计时对象属性有:
  • seconds 秒(总数)
  • minutes 分钟(总数)
  • hours 小时(总数)
  • days 天(总数)
  • years 年数
  • d 天(组合)
  • h 小时(组合)
  • m 分钟(组合)
  • s 秒(组合)

如何使用

  1. 引入插件
import TimeCD from '@/plugins/timeCountDown'
复制代码
  1. 调用插件
this.timeCD = new TimeCD({
    startTime: new Date().getTime(),
    endTime: new Date('2020-06-13').getTime(),
    onSecondChange(){
        that.$apply()
    },
    onFinish() {
        console.log('==倒计时结束===')
        that.$emit('time end')
    }
})
复制代码
  1. 赋值使用 代码以下:
<view class="li_plugins">距结束还剩:<text>{{timeCD.years}}</text>年<text>{{timeCD.d}}</text>天<text>{{timeCD.h}}</text>小时<text>{{timeCD.m}}</text>分<text>{{timeCD.s}}</text>秒</view>
复制代码

展现以下: bash

倒计时组合形式
这个倒计时插件知足了常见对倒计时的须要,是我在平常实践中经常使用的一款,推荐给你们使用。
相关文章
相关标签/搜索