# SuperPage组件-计时器
SuperPage提供了计时器组件,可以实现倒计时、秒表和定时循环等,如下图:
# 使用计时器组件
计时器是一个“虚拟”组件,没有界面,在设置的时长内,按设置间隔定时触发在计时器上设置的交互动作,配合其他组件可以完成特定的效果。同时计时器状态也会发生变化,从而实现计数功能,状态包括秒表的秒数或倒计时剩余的秒数、当前时间、激活状态、触发次数等。
操作步骤:
- 拖入计时器组件: 在组件区>其它中将计时器组件拖入到画布中
- 计时器设置: 在属性栏>计时器下,选择计时器的类型为
秒表
,时长为5
秒,间隔为1
秒,更多设置查看计时器设置 - 显示计时器时间: 拖入文本组件,设置内容为
${[计时器1].[秒]}
,文本会自动获取计时器返回的数据,并实时发生变化,更多效果查看应用场景
# 计时器设置
在属性栏>计时器中可对计时器的类型、时长、间隔、启动方式进行设置,可实现不同效果的计时器。
# 计时器类型
计时器支持倒计时、秒表和自动循环三种计时类型。在计时器>类型中设置:
- 倒计时:在设定的时长内按照间隔进行倒计时,直到时间为0秒时停止计时,可设置时长与间隔
- 秒表:从0秒开始计时,按照间隔显示时间直到设置的时长时停止计时,可设置时长与间隔
- 自动循环:按照设置的间隔自动循环,常用于循环播放多页面板,只可设置间隔,详细可查看循环切换多页面板
不同类型可设置的属性不同,如下:
- 时长:在设置的时长内计时器状态发生变化,直到时长结束停止,自动循环类型不可设置
- 间隔:表示每间隔一次计时器状态发生一次变化,若计时器添加有交互,则每间隔一次也会执行一次交互,默认1秒,三种类型计时器均可设置间隔
# 计时器启动
计时器支持自动、手动和按条件启动三种方式。在计时器>启动中设置:
# 应用场景
# 验证码倒计时
使用计时器可实现手机登录获取验证码时,倒计时60秒的效果。实现思路如下:
- 计时器设置
倒计时
类型,时长为60
秒,间隔1
秒,启动方式为手动
- 在
获取验证码
按钮上添加调用组件方法
交互,选择组件设置为计时器11
,方法设置开始计时
示例地址:应用场景-验证码倒计时 (opens new window)
# 循环切换多页面板
使用计时器可实现循环播放页面效果,循环效果需与多页面板配合实现。实现思路如下:
- 计时器设置
定时循环
类型,间隔为3
秒,启动方式为手动
,并设置切换多页面板交互 - 在
开始
按钮上添加调用组件方法
交互,选择组件设置为计时器8
,方法设置开始计时
0条评论
评论