收藏
评论

倒计时组件

工作中常用到倒计时功能,有的是列表界面有多个倒计时显示;

所以封装了该控件,以满足类似业务需求。


github地址:

https://github.com/boiledwater/count-down

组件属性

format倒计时显示格式;默认为:{mm}:{s}格式;

{d}:表示天; {h}:表示小时; {mm}:表示分钟; {s}:表示秒; 例如: 1)距结束 {d}天 {h}时{mm}分{s}秒 2){d}天 {h}:{mm}:{s}

expireText

过期后显示文本;默认为:已结束

showSlot

是否显示为自定义的倒计时显示view样式;默认为false;

expireTime

过期的时间点;日期格式为:2018-12-5 12:43:9

事件

expireTime

过期的时候发出该事件,使用者可以绑定该事件;

countDown

当showSlot为ture的时候,组件会循环调用该事件;使用者可以绑定该事件; 其中e.detail里包含倒计时数据;

使用方式

xx.json文件引用组件

{
  "usingComponents": {   
    "down": "/components/count-down/index"
  }
}

xx.wxml使用组件

<down expire-time='{{expire_time}}'/>
最后一次编辑于  2018-11-14
收藏

2 个评论

  • 我和你
    我和你
    2019-01-17

    没用上,但仍感谢分享!

    2019-01-17
    赞同 1
    回复
  • 我是雨桐呀
    我是雨桐呀
    2018-11-14

    您好  求教一个问题  就是我如何能够监听到倒计时结束 呢   我需要根据倒计时结束给个状态   来改变Ui

    2018-11-14
    赞同
    回复 3
登录 后发表内容