微信小程序之订单倒计时实现

最新推荐文章于 2025-06-14 09:48:05 发布

原创

最新推荐文章于 2025-06-14 09:48:05 发布 · 3.8k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文介绍了在微信小程序中实现订单倒计时的方法，包括思路、难点及两种实现方式。难点在于处理多个不同时间差的倒计时，文中提供了后台计算时间差和前端计算时间差两种方案，并给出了相应的关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

倒计时

之前在做一个有拼团功能项目的时候遇到过倒计时的问题，由于当时技术不熟在这方面耽搁了好些时间，所以这里整理出来希望能为后来人提供些许启发。
1.实现思路：
求出发起拼团时间与拼团结束时间的时间差
再将时间差格式化得到我们想要的格式如：
在这里插入图片描述
时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数，让这个函数每隔一秒执行一次。
效果图：

2.实现中的难点
若是要实现单个倒计时如60s发送验证码倒不是很难，难的是多条倒计时。
不同的订单下单时间是不一样的时间差time也就不一样，所以当初在这卡了很久，后来想通一切才觉得原来如此。
实现方法1：是后台计算出时间前端直接获取时间差，当时为了不影响项目进度我们用的就是这个方法，真是苦了那个些后台的兄弟还得迁就我这个菜鸟。
获取这个时间差time后我们就可以将它处理后放入数组循环。这样做的好处是前端不用将time作为一个属性添加到原数组中。
index.wxml

<view class="item">单条倒计时:{
  
  {time}}</view>
 <view class="item">多条倒计时</view>
 <view class='no'>暂无任何记录</view>
  <view class="content">
    <block wx:for="{
  
  {listData}}"wx:key="idx" wx:for-item="item" wx:for-index="{
  
  {idx}}">
      <view class="tip {
  
  {item.time<=0?'isShow':''}}">
        <view class="dis">
  <view class='dis_time left'>剩余时间：{
  
  {item.countDown}}</view>
        </view>
      </view>
    </block>
  </view>

index.wxss

page{
  height:100%;
  background: #fff;
  position: relative;
}
.item{
  height:4%;
  background:  #fff;
  text-align: center;
}
.content{
  border:1px solid rgb(167, 159, 159);
  background: #