怎么在小程序中实现一个列表倒计时功能

这篇文章给大家介绍怎么在小程序中实现一个列表倒计时功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

HTML代码

<view class="hbMpBox" wx:for="{{mpThing}}" data-goodsId="{{item.goods_id}}" data-id="{{index}}" bindtap="navSeceGroup">     <view class="hbMpBox_l">       <image src="{{item.goods_img}}"></image>     </view>     <view class="hbMpBox_r">       <view class="hbMpBox_r_head">{{item.goods_name}}</view>       <view class="hbMpBox_r_time">         <view class="syTime_tx " >距结束:</view>         <view class="syTime_day">{{item.goods_time[0]}}天</view>         <view class="syTime_time syTime_time1">{{item.goods_time[1]}}</view>         <view class="syTime_time1">:</view>         <view class="syTime_time syTime_time2">{{item.goods_time[2]}}</view>         <view class="syTime_time1">:</view>         <view class="syTime_time syTime_time3">{{item.goods_time[3]}}</view>         </view>       <view class="hbMpBox_r_price">         <view class="hbMpBox_r_price_l">           <view class="hbMpBox_r_price_l_box onFontNow" >             <text >拼团价:</text><text >￥{{item.secs_price}}</text>           </view>                     </view>         <view class="hbMpBox_r_price_r">           趣拼团         </view>       </view>     </view>   </view>   <view class="indexMptxBox" wx:if="{{mpThing[0]}}" bindtap="secondGroupNav">     点击查看更多 </view>

CSS代码

/*秒拼样式书写*/ .hbMpBox{   padding: 20rpx;   background: #fff;   display: flex;   border-bottom: 2rpx #eee solid; } .hbMpBox .hbMpBox_l{   width: 155rpx;   height: 140rpx;   min-width: 155rpx;   } .hbMpBox .hbMpBox_l image{   width: 100%;   height: 100%; } .hbMpBox .hbMpBox_r{   width: 540rpx;   margin-left: 20rpx;   color: #333;   font-size: 22rpx;   position: relative; } .hbMpBox .hbMpBox_r .hbMpBox_r_bb{   display: flex;   position: relative;   margin-top: 10rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_l2{   position: relative;   max-width: 270rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_hh{   font-size: 28rpx;   max-width: 270rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_h{   font-size: 40rpx;   } .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_des{   width: 100%;   margin-right: 20rpx;   margin-top: 10rpx;   color: #a8a8a8;   line-height: 35rpx;   height: 70rpx;   word-break: break-all;   text-overflow: ellipsis;   display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/   -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/   -webkit-line-clamp: 2; /** 显示的行数 **/   overflow: hidden; /** 隐藏超出的内容 **/ } .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_text{   font-weight: 600;   color: #d13d4b;   margin-top: 10rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_head{   font-size: 28rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_des{   margin-top: 4rpx;   color: #999; } .hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time{   font-size: 20rpx;   color: #bdbdbd;   word-spacing: 5rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time .fontTime{   font-weight: 900;   font-size: 26rpx;   color: #7c7d7f; } .hbMpBox_r .hbMpBox_r_r2{   min-width: 210rpx;   max-width: 48%;   border: 2rpx #d13d4b solid;   border-radius: 10rpx;   max-height: 110rpx;   position: absolute;   right: 0rpx;   height: 100%;   } .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in{   height: 54rpx;   display: flex;   justify-content: center;   align-items: center;   padding: 0rpx 10rpx;   line-height: 54rpx; } .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in1{   background: #d13d4b;   color: #fff; } .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in2{   color: #d13d4b; } .hbMpBox .hbMpBox_r .hbMpBox_r_time{   margin-top: 15rpx;   font-size: 24rpx;   display: flex;   align-items: center; }   .syTime_time{   padding: 3rpx 6rpx;   background: #444;   text-align: center;   color: #fff;   border-radius: 5rpx;   margin: 0rpx 5rpx; } .hbMpBox .hbMpBox_r .hbMpBox_r_price{   margin-top: 20rpx;   display: flex;   justify-content: space-between;   align-items: center; } .hbMpBox .hbMpBox_r .hbMpBox_r_price .hbMpBox_r_price_r{   background: #d13d4b;   color: #fff;   width: 150rpx;   height: 50rpx;   line-height: 50rpx;   text-align: center;   border-radius: 5rpx; } .indexMptxBox{   padding: 20rpx;   text-align: center;   font-size: 24rpx; }

JS代码(得到后台数据查询用FIND方法插入字段,直接遍历会有问题)

mpThing.find(function(v){         var aa = v.goods_time;         var bb = util.dayTimeArr(aa);         v.goods_time = bb         that.setData({          mpThing:mpThing,         })         var ref = setInterval(function(){           aa--           var timeArr = util.dayTimeArr(aa);           v.goods_time = timeArr           that.setData({            mpThing:mpThing,           })         },1000); })

关于怎么在小程序中实现一个列表倒计时功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。