type: Counter

通过各类样式属性的应用，提供了多个可组合使用值（day、hour、minute、second）的计时类型组件，可提供灵活组合使用，作为计时类的展示组件，用于实现计数器展示效果以及相应的计数完成时执行逻辑。

demo

组件特殊说明

Counter 组件中支持 嵌套任意多的 Container、Image、Text、Frame 组件，

当且仅当 其内部子组件存在包含的 Text 组件中的对应 props 中 text 属性值为：

(1) #Counter.$day" 展示 Counter 组件的日期天数

(2) #Counter.$hour" 展示 Counter 组件的日期小时

(3) #Counter.$minute" 展示 Counter 组件的日期分钟

(4) #Counter.$second" 展示 Counter 组件的日期秒数

props

名称	类型	默认值	可选值	必填	描述
timestamp	number,string	0	-	否	计时时间参数，单位毫秒
tick	number,string	1000	-	否	计时时间间隔，单位毫秒
delay	number	0	-	否	组件计时的延时执行时间，单位毫秒
countMode	string	DECR	DECR,INCR	否	计时方式，DECR 减量倒计时，INCR 增量顺计时
countType	string	SECOND	SECOND,MINUTE,HOUR,DAY	否	计时类型，支持以 SECOND 秒、MINUTE 分钟、HOUR 时、DAY 天 多种方式展现计时
placeholder	string	--	-	否	计时占位符，初始化时展现
autoplay	boolean	true	-	否	是否开始自动执行计时功能

events

名称	参数	参数说明	event说明
onEnd	-	-	计时完成后可触发该事件，标识为计时完成状态
onLoaded	-	-	组件加载完成后可触发该事件（仅在初次渲染完成时触发一次）

methods

方法名	参数	参数说明	method说明
reset	-	-	重置当前计时器，重新开始 delay 后执行计时
pause	-	-	暂停当前计时器
play	-	-	执行当前计时器计数

组件样例（example）

{
    "type": "Counter",
    "styles":{
        "width": "100%",
        "background": "transparent",
        "flex-direction": "row",
        "justify-content": "center",
        "align-items": "center"
    },
    "props":{
        "timestamp": 638712100,
        "tick": 500,
        "countMode": "DECR",
        "countType": "DAY",
        "asrDisabled": true,
        "autoplay": true
    },
    "componentId": "demo_counter_id_1",
    "events":{
        "onEnd": [{
            "componentId": "demo_counter_id_1",
            "arguments":["event_counter_end"],
            "type": "SendEvent"
        }]
    },
    "items": [{
        "type": "Container",
        "styles":{
            "height": "100%",
            "border-radius": "16dp",
            "padding": "16dp",
            "background-color": "rgba(1, 1, 1, .2)",
            "flex-direction": "row",
            "justify-content": "center",
            "align-items": "center",
            "width": "800dp"
        },
        "items": [{
            "type": "Text",
            "styles":{
                "color": "#FFF",
                "font-size": "36dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "#Counter.$day"
            }
        }, {
            "type": "Text",
            "styles":{
                "margin-left": "8dp",
                "width": "60dp",
                "color": "green",
                "font-size": "26dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "日"
            }
        }, {
            "type": "Text",
            "styles":{
                "color": "#FFF",
                "font-size": "36dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "#Counter.$hour"
            }
        }, {
            "type": "Text",
            "styles":{
                "margin-left": "8dp",
                "width": "60dp",
                "color": "green",
                "font-size": "26dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "小时"
            }
        }, {
            "type": "Text",
            "styles":{
                "color": "#FFF",
                "font-size": "36dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "#Counter.$minute"
            }
        }, {
            "type": "Text",
            "styles":{
                "margin-left": "8dp",
                "width": "60dp",
                "color": "green",
                "font-size": "26dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "分钟"
            }
        }, {
            "type": "Text",
            "styles":{
                "color": "#FFF",
                "font-size": "36dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "#Counter.$second"
            }
        }, {
            "type": "Text",
            "styles":{
                "margin-left": "8dp",
                "width": "60dp",
                "color": "green",
                "font-size": "26dp",
                "opacity": "0.8"
            },
            "props":{
                "text": "秒"
            }
        }, {
            "type": "Text",
            "styles":{
                "color": "#FFF",
                "font-size": "26dp",
                "opacity": "0.7"
            },
            "props":{
                "text": "可以作为某类倒计时展示"
            }
        }]
    }]
}