在大屏上实现倒计时的效果

实现效果：

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

实现思路：

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

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

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

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

代码如下：

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

return [{
  text:+data[0].text-window.num
}];
}

然后把选项卡的默认选中设置为0

demo:📎倒计时_1976668.zip