小程序实现列表倒计时功能

本文实例为大家分享了小程序实现列表倒计时的具体代码，供大家参考，具体内容如下

效果

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 " style="font-weight: 600;
    ">
    距结束:/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" style="max-width: 400rpx;
    ">
                text style="color: #999;
    ">
    拼团价:/text>
    text style="color: #d13d4b;
    font-Size: 34rpx;
    ">
￥{
{
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);
}
    )

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序 倒计时组件实现代码
• 微信小程序动态显示项目倒计时效果
• 微信小程序倒计时功能实例代码
• 微信小程序之发送短信倒计时功能
• js倒计时小程序
• 微信小程序实现订单倒计时
• 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
• 微信小程序实现倒计时60s获取验证码
• 微信小程序实现日期格式化和倒计时
• 微信小程序倒计时功能实现代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！