先看效果:
可以看到,每次倒计时的时候,选项卡都会切换选项,所以要实现一个这样的倒计时效果,我们往往需要借助于选项卡,当然其他的带有轮播效果的组件也是可以的,这里只是以选项卡举个例子。
实现思路:
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
}];
文章
3.1K人气
8粉丝
1关注
©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号
互联网信息服务业务 合字B2-20220090