小程序?qū)崿F(xiàn)列表倒計(jì)時(shí)功能
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)列表倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
效果
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;">距結(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" style="max-width: 400rpx;"> <text style="color: #999;">拼團(tuán)價(jià):</text><text style="color: #d13d4b;font-size: 34rpx;">¥{{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代碼
/*秒拼樣式書(shū)寫(xiě)*/ .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; /** 對(duì)象作為伸縮盒子模型顯示 **/ -webkit-box-orient: vertical; /** 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 **/ -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ì)有問(wèn)題)
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); })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序之發(fā)送短信倒計(jì)時(shí)功能
- js倒計(jì)時(shí)小程序
- 微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)
- 微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
相關(guān)文章
淺談讓你的代碼更簡(jiǎn)短,更整潔,更易讀的ES6小技巧
這篇文章主要介紹了淺談讓你的代碼更簡(jiǎn)短,更整潔,更易讀的ES6小技巧,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10scrollWidth,clientWidth,offsetWidth的區(qū)別
這篇文章主要介紹了scrollWidth,clientWidth,offsetWidth的區(qū)別,需要的朋友可以參考下2015-01-01Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問(wèn)我一個(gè)問(wèn)題:“有一個(gè)JSON對(duì)象,其中有若干個(gè)子對(duì)象,如何遍歷這個(gè)對(duì)象中的子對(duì)象?”2009-07-07javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法
這篇文章主要介紹了javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法,可實(shí)現(xiàn)針對(duì)域名和IP的可信任站點(diǎn)判斷功能,需要的朋友可以參考下2015-06-06讓Firefox支持event對(duì)象實(shí)現(xiàn)代碼
FireFox并沒(méi)有 window.event ,所以在FireFox下編寫(xiě)事件處理函數(shù)是很麻煩的事。如果要得到 event 對(duì)象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event2009-11-11html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間
顯示本地時(shí)間的方法有很多,在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間,感興趣的朋友可以了解下2013-09-09