How to realize Mini Program bar countdown animation
Today, the editor will share with you the relevant knowledge points about how to realize Mini Program bar countdown animation. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.
1. The effect picture is as follows:
2. Wxml countdown: {{t}} 3. Wxssheadpiece-num {position: absolute;top:-3rpxtens right:-35rpx width: 62rpx: height: 100% position: center;}. Headpiece-time {position: relative;width: 305rpx;}. Headpiece-process {position: relative;width: 138rpxposition height: 14rpxtransposition: 14rpxleft: 4rpx solid # 000scape: hidden;background: # fff4b2;} .headquarter-process-inner {position: absolute;top: 0rpxleft: 0rpx Background: # f74242: height: 100%: all 0.3s ease-out;}. IV. Index.js
/ * *
* obtain system information
, /
GetSystemInfo: function () {
Return new Promise ((a, b) = > {
Wx.getSystemInfo ({
Success: function (res) {
A (res)
}
Fail: function (res) {
B (res)
}
})
})
}
/ * *
* Progress bar animation
, /
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
