您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么在小程序中實(shí)現(xiàn)一個(gè)列表倒計(jì)時(shí)功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
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 " >距結(jié)束:</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 >拼團(tuán)價(jià):</text><text >¥{{item.secs_price}}</text> </view> </view> <view class="hbMpBox_r_price_r"> 趣拼團(tuán) </view> </view> </view> </view> <view class="indexMptxBox" wx:if="{{mpThing[0]}}" bindtap="secondGroupNav"> 點(diǎn)擊查看更多 </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; /** 設(shè)置或檢索伸縮盒對象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 顯示的行數(shù) **/ overflow: hidden; /** 隱藏超出的內(nèi)容 **/ } .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代碼(得到后臺(tái)數(shù)據(jù)查詢用FIND方法插入字段,直接遍歷會(huì)有問題)
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); })
關(guān)于怎么在小程序中實(shí)現(xiàn)一個(gè)列表倒計(jì)時(shí)功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。