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

This article mainly introduces "how to use WeChat Mini Programs countdown components". In daily operation, I believe many people have doubts about how to use WeChat Mini Programs countdown components. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt about how to use WeChat Mini Programs countdown components! Next, please follow the editor to study!

ReFactor the old code

In the original component, there is an initDuration property and three methods, which are countDown,format and runCountDown.

InitDuration attribute

First, we need three page attributes to help complete the following code, their names and contents are as follows:

Timer: null, / / store IDflag of setInterval: false, / / Mark whether the countdown ends or not num: 0 / / number of seconds in the past copy code

In the new callback method of the initDuration property, we encapsulate the clearTimer method, the init initialization method, and perform a countdown.

InitDuration: {type: Number, value: 0, observer: function (newVal) {if (this.timer) {this.clearTimer ()} this.init () / / reset num and flag this.runCountDown (newVal)}}, copy the code

It is important to note that when the value of the property passed in is the default value, for example, 0 here, the observer callback is not triggered.

/ * * initialization function * / init: function () {this.flag = false this.num = 0} / * clear timer * / clearTimer: function () {clearInterval (this.timer) this.timer = null} copy code countDown method

The countDown method takes an argument as the number of seconds of the countdown and returns a string of countdown. There are no big changes in this method, just some code format changes. As follows:

/ * calculate countdown * @ param {Number} duration-time difference in seconds * @ returns {string} Countdown string * / countDown: function (duration) {if (duration = 60? This._format (minutes% 60): this._format (minutes) let hours = this._format (Math.floor (duration / 3600)) return `$ {hours}: ${minutes}: ${seconds} `}, copy the code format method

The function of the format method is simple, which is to deal with digital display problems that are less than 10.

/ * * format numbers less than 10 * @ param {Number} time-numbers less than 10 * @ returns {string} formatted string * / format: function (time) {return time > = 10? Time: `0 ${time} `}, copy the code runCountDown method

The changes in the runCountDown method are relatively large, and the logic is confused in the original code, interspersed with a lot of extraneous code, which should actually be encapsulated to achieve the purpose of decoupling.

RunCountDown: function (initDuration) {/ / assign the countdown to this.setData ({countDownStr}) this.setCountDownTime (this.countDown (initDuration)) / / update every second this.timer = setInterval (() = > {if (this.flag = = true) {/ / countdown ends clearInterval (this.timer) return undefined} this.addNum () / / this.num + = 1 This.setCountDownTime (this._countDown (initDuration-this.num))} 1000)}, copy the code to add new features

Our original countdown component lacks some functions, for example, the time passed in can only be seconds, and only 00:00:00 is displayed at the end of the countdown. If the value passed in is 0, it will not be initialized (this is regarded as Bug). So we need to add the following new features:

Supports custom realistic strings at the end of the countdown.

Fix the Bug with an input value of 0.

The time passed in can be the number of seconds or a string of UTC times.

Custom end string

In the countdown component, it is the this.data.countDownTime property that displays the countdown string. So at the end, set the value of the countDownTime property to the passed-in string. First, encapsulate an assignment method

SetEndContent: function (countDownTime) {if (countDownTime) {this.setData ({countDownTime})} copy the code

Next, add a new property to the component, endContent.

EndContent: {type: String, value:'00 String 00'} copy code

Next, at the end of the countdown, call our assignment method, which is in the timer callback function of the runCountDown method.

This.timer = setInterval (() = > {if (this.flag = = true) {clearInterval (this.timer) this.setEndContent (this.properties.endContent) / / set end string return undefined} this.addNum () this.setCountDownTime (this._countDown (initDuration-this.num))}, 1000) copy the code

In this way, the custom string is successful, just pass in the default value when using the component.

Fix Bug with an input value of 0

This problem occurs because the observer callback function is not called when the incoming property is the default value, so we need to use the component's attached lifecycle function.

Attached: function () {if (this.properties.initDuration

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.