小程序實現列表倒計時功能
本文實例為大傢分享瞭小程序實現列表倒計時的具體代碼,供大傢參考,具體內容如下
效果
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); })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue uniapp實現分段器效果
- 微信小程序自定義可滑動的tab切換
- 微信小程序實現點餐小程序左側滑動菜單
- 微信小程序實現時間軸特效
- 微信小程序拍賣商品詳情頁設計與交互實現代碼(含倒計時、實時更新出價)