一步步教你如何实现小程序倒计时三二一后跳转页面功能,附加倒计时过渡动画

7 篇文章 0 订阅
4 篇文章 0 订阅

前言

实现此效果涉及到的知识点:
1.this.setData({}) 实现页面的同步更新
2.设置定时器和清除定时器
3.附:监听css3动画animation结束触发:bindanimationend


一、页面内容及布局样式

/*index.qml*/
<view class="mask-num" bindanimationend='animationend'>
       {{countDownNum}}
</view>
<view class="mask-numtext">
     倒计时后开始
</view>
/*index.qss*/
.mask-num{
    height: 74rpx;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 60rpx;
    line-height: 122%;
    text-align: center;
    color: #FFFFFF;
    animation: mask-num 1.1s linear;  
}


/* 定义keyframe动画,命名为mask-num,实现倒计时会过渡的效果 */
@keyframes mask-num{
  0%{opacity: 1;}
  100%{opacity: 0.6;} 
}

/* 在倒计时时下方文字样式 */
.mask-numtext{
  height: 44rpx;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 44rpx;
  text-align: center;
  color: #FFFFFF;
}

二、页面逻辑
页面的逻辑主要分为两部:
1.设置定时器处理页面数字的变换(从3到1)
2.当数字转变到1时,跳转页面
(为达到过渡得不那么生硬,会适当地添加延时器:setTimeout

Page({
    data: {
        timer: '',//定时器名字
        countDownNum: '3',//倒计时初始值
    },
    //倒计时定时器
    countDown() {
        let that = this;
        let countDownNum = that.data.countDownNum;//获取倒计时初始值
        //如果将定时器设置在外面,那么用户就看不到countDownNum的数值动态变化,所以要把定时器存进data里面
        that.setData({
            timer: setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
                //每隔一秒countDownNum就减一,实现同步
                countDownNum--;
                //然后把countDownNum存进data,页面同步
                that.setData({
                    countDownNum: countDownNum
                })
                if (countDownNum == 1) {
                //当倒计时达到1时,关闭定时器和触发跳转页面事件
               //这里特别要注意,计时器是始终一直在走的,要记得关掉定时器!不然相当耗性能
              clearInterval(that.data.timer);
              //关闭定时器之后,触发跳转页面事件
               setTimeout(() => {
                        qq.$navigateTo('/pages/scene/scene')
                    }, 800)
                }
            }, 1000)
        })
    },
    /*监听动画结束后触发的事件,在此例子暂时不用上*/
    animationend() {
        //此处写你要触发的方法
    },

*参考文章链接:微信小程序用定时器实现倒计时效果

如果此篇博客能帮得到你,欢迎大家关注点赞评论收藏转发呀~

如有不足也请在评论区提出批评指正!多多指教!

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值