本文实例为大家分享了小程序实现列表倒计时的具体代码，供大家参考，具体内容如下
效果
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 : 20 rpx;
background : #fff ;
display : flex;
border-bottom : 2 rpx #eee solid ;
}
.hbMpBox .hbMpBox_l{
width : 155 rpx;
height : 140 rpx;
min-width : 155 rpx;
}
.hbMpBox .hbMpBox_l image{
width : 100% ;
height : 100% ;
}
.hbMpBox .hbMpBox_r{
width : 540 rpx;
margin-left : 20 rpx;
color : #333 ;
font-size : 22 rpx;
position : relative ;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_bb{
display : flex;
position : relative ;
margin-top : 10 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l 2 {
position : relative ;
max-width : 270 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_hh{
font-size : 28 rpx;
max-width : 270 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l 2 .hbMpBox_r_l 2 _h{
font-size : 40 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l 2 .hbMpBox_r_l 2 _des{
width : 100% ;
margin-right : 20 rpx;
margin-top : 10 rpx;
color : #a8a8a8 ;
line-height : 35 rpx;
height : 70 rpx;
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_l 2 .hbMpBox_r_l 2 _text{
font-weight : 600 ;
color : #d13d4b ;
margin-top : 10 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_head{
font-size : 28 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_des{
margin-top : 4 rpx;
color : #999 ;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l 2 _Time{
font-size : 20 rpx;
color : #bdbdbd ;
word-spacing : 5 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l 2 _Time .fontTime{
font-weight : 900 ;
font-size : 26 rpx;
color : #7c7d7f ;
}
.hbMpBox_r .hbMpBox_r_r 2 {
min-width : 210 rpx;
max-width : 48% ;
border : 2 rpx #d13d4b solid ;
border-radius: 10 rpx;
max-height : 110 rpx;
position : absolute ;
right : 0 rpx;
height : 100% ;
}
.hbMpBox_r .hbMpBox_r_r 2 .hbMpBox_r_r 2 _in{
height : 54 rpx;
display : flex;
justify- content : center ;
align-items: center ;
padding : 0 rpx 10 rpx;
line-height : 54 rpx;
}
.hbMpBox_r .hbMpBox_r_r 2 .hbMpBox_r_r 2 _in 1 {
background : #d13d4b ;
color : #fff ;
}
.hbMpBox_r .hbMpBox_r_r 2 .hbMpBox_r_r 2 _in 2 {
color : #d13d4b ;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_time{
margin-top : 15 rpx;
font-size : 24 rpx;
display : flex;
align-items: center ;
}
.syTime_time{
padding : 3 rpx 6 rpx;
background : #444 ;
text-align : center ;
color : #fff ;
border-radius: 5 rpx;
margin : 0 rpx 5 rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price{
margin-top : 20 rpx;
display : flex;
justify- content : space-between;
align-items: center ;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price .hbMpBox_r_price_r{
background : #d13d4b ;
color : #fff ;
width : 150 rpx;
height : 50 rpx;
line-height : 50 rpx;
text-align : center ;
border-radius: 5 rpx;
}
.indexMptxBox{
padding : 20 rpx;
text-align : center ;
font-size : 24 rpx;
}
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);
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/lcming/p/7839672.html