uniapp小程序,实现每次进入页面时自动开启 30 秒的倒计时。

<view class="number">{{count}}</view>
<!-- 倒计时数字 -->
data() {
return {
count: 30,
timer: null,
};
},
methods: {
countDown() {
let _this = this;
const TIME_COUNT = 30;
if (!this.timer) {
this.count = TIME_COUNT;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
},
onShow() {
this.countDown();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现多个批量计时,可以考虑使用定器和循环遍历的方式来处理。 具体实现步骤如下: 1. 在页面中定义一个数组,用于存储需要计时的数据。 2. 在页面的 onShow 生命周期函数中,遍历数组,为每个数据项设置一个定器,并将定器的 id 存储到对应的数据项中。 3. 定器的回调函数中,更新对应数据项的计时间,并判断计时是否结束,如果结束,则清除定器。 4. 当页面 onHide ,清除所有定器,防止定器持续运行,浪费资源。 以下是示例代码: ```html <template> <view> <view v-for="(item, index) in list" :key="index"> <text>{{ item.name }}</text> <text>{{ item.remainingTime }}</text> </view> </view> </template> <script> export default { data() { return { list: [ { name: 'item1', remainingTime: 60, timerId: null }, { name: 'item2', remainingTime: 120, timerId: null }, { name: 'item3', remainingTime: 180, timerId: null } ] } }, onShow() { this.list.forEach((item, index) => { const timerId = setInterval(() => { item.remainingTime-- if (item.remainingTime <= 0) { clearInterval(item.timerId) item.timerId = null } }, 1000) item.timerId = timerId }) }, onHide() { this.list.forEach((item, index) => { if (item.timerId) { clearInterval(item.timerId) item.timerId = null } }) } } </script> ``` 在上述代码中,list 数组中存储了三个数据项,每个数据项包含了需要计时间和对应的定器 id。在页面的 onShow 生命周期函数中,遍历 list 数组,为每个数据项设置一个定器,并将定器 id 存储到对应的数据项中。定器的回调函数中,更新对应数据项的计时间,并判断计时是否结束,如果结束,则清除定器。当页面 onHide ,清除所有定器,防止定器持续运行,浪费资源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值