提问 发文

大屏使用技巧——如何在大屏上实现倒计时的效果?

赵炎飞

| 2023-05-31 17:44 1844 0 0

先看效果:

    

        可以看到,每次倒计时的时候,选项卡都会切换选项,所以要实现一个这样的倒计时效果,我们往往需要借助于选项卡,当然其他的带有轮播效果的组件也是可以的,这里只是以选项卡举个例子。

实现思路:

    1.创建一个选项卡组件,开启自动轮播,并设置轮播间隔为1s。


    2.给选项卡添加一个状态改变的回调,将s发出来。


    3.创建一个标题组件,修改默认数据为60或其他任意值。


    4.给标题组件添加一个数据过滤器,用来接受选项卡发送过来的回调。同时,在过滤器中创建一个全局变量num,该变量用于记录接收到了几次s,在返回数据时,我们将标题组件默认的text的值(60)减去num的值,就是倒计时后的值了。当然,我们也需要加个判断,让num的值不要一直增长,否则会出现负数的情况。


代码如下:

if(!window.num){
window.num=0;
}
if(num<60){
window.num++;
}

return [{
text:+data[0].text-window.num
}];
收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群