微信小程序 实现全局倒计时
时间: 2023-09-14 18:07:35 浏览: 370
要在微信小程序中实现全局倒计时,您可以使用wx.setInterval()方法来定时更新倒计时。以下是一个简单的示例:
1. 在app.js中定义全局变量countdown,初始化为0:
```
App({
// 定义全局变量
countdown: 0
})
```
2. 在需要使用倒计时的页面中,设置定时器并更新countdown变量:
```
Page({
// 设置定时器
onLoad: function () {
wx.setInterval(() => {
// 获取全局变量
let countdown = getApp().countdown
countdown++
// 更新全局变量
getApp().countdown = countdown
}, 1000)
}
})
```
3. 在需要显示倒计时的页面中,使用countdown变量计算倒计时并显示:
```
Page({
data: {
countdownText: ''
},
// 计算倒计时
onLoad: function () {
setInterval(() => {
let countdown = getApp().countdown
let seconds = 60 - countdown % 60
let minutes = parseInt((600 - countdown) / 60)
let countdownText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
this.setData({
countdownText: countdownText
})
}, 1000)
}
})
```
在这个示例中,我们定义了一个全局变量countdown,然后在定时器中每秒更新一次它的值。然后,在需要显示倒计时的页面中,我们使用countdown变量计算倒计时,并将其显示在页面上。这样,无论用户在哪个页面,都可以看到全局倒计时啦!
阅读全文