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

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

效果

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);

})

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

以上是 小程序实现列表倒计时功能 的全部内容, 来源链接: utcz.com/p/219512.html

回到顶部