1. wxml
倒计时: {{t}}
2. 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;}
3. 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 <= 0 ? 0 : schedule, width = parseInt(schedule_1 * 100), t = parseInt((this.data.maxtime) * schedule_1)+1; _ts.setData({ width: width, t:t }); if (schedule <= 0) { cancelAnimationFrame(temp); _ts.setData({ width: width, t: 0 }); return; } else { animate(); }; }) })(); }); },
下一篇:开发一个微信小程序要多少钱?