Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.