小程序条带倒计时动画实现案例

本文主要是为大家介绍一下小程序条带倒计时动画的实现，非常简单，你可以尝试一下。

首先，效果图如下：

二、wxml 倒计时：{{t}} 

三、wxss .headpiece-num {position: absolute;top: -3rpx;right: -35rpx;width: 62rpx;height: 100%;text-align: center;} .headpiece-time {position: relative;width: 305rpx;} .headpiece-process {position: relative;width: 138rpx;height: 14rpx;margin-right: 14rpx;border: 4rpx solid #000;overflow: hidden;background: #fff4b2;} .headpiece-process-inner {position: absolute;top: 0rpx;left: 0rpx;background: #f74242;height: 100%;transition: all 0.3s ease-out;} 

四、index.js /*** 获取系统信息*/getSystemInfo: function () {return new Promise((a, b) => {wx.getSystemInfo({success: function (res) {a(res)},fail: function (res) {b(res)}})})},/*** 进度条动画*/countdown: function () {const requestAnimationFrame = callback => {return setTimeout(callback, 1000 / 60);}, cancelAnimationFrame = id => {clearTimeout(id);}; this.getSystemInfo().then(v => {let maxtime = this.data.maxtime,width = this.data.width,sTime = +new Date,_ts = this,temp,animate;(animate = () => {temp = requestAnimationFrame(() => {let time = maxtime * 1000,currentTime = +new Date,schedule = 1 - (currentTime - sTime) / time,schedule_1 = schedule <=>

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。