时间:2021-05-18
本文实例为大家分享了小程序实现列表倒计时的具体代码,供大家参考,具体内容如下
效果
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);})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近在写一个列表功能,列表中有倒计时的效果,网上没有可用的素材,以下是本人自己写的,如有问题,希望大家指出。先来看看基本的效果小程序中列表倒计时,类似活动倒计时
倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到。这里记录一下在微信小程序里面倒计时功能的简单实现。直接看看代码吧//倒计时60秒functionc
本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下效果图实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染!J
python实现windows倒计时锁屏功能#倒计时锁屏importtimefromctypesimport*defclosewindows(closetime
本文实例讲述了微信小程序显示倒计时功能。分享给大家供大家参考,具体如下:微信小程序中显示倒计时:index.wxml:剩:{{countDownDay}}天{{