• 售前

  • 售后

热门帖子
入门百科

小步伐实现列表倒计时功能

[复制链接]
123457753 显示全部楼层 发表于 2021-10-25 20:32:16 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了小步伐实现列表倒计时的具体代码,供各人参考,具体内容如下
效果

HTML代码
  1. <view class="hbMpBox" wx:for="{{mpThing}}" data-goodsId="{{item.goods_id}}" data-id="{{index}}" bindtap="navSeceGroup">
  2.     <view class="hbMpBox_l">
  3.       <image src="{{item.goods_img}}"></image>
  4.     </view>
  5.     <view class="hbMpBox_r">
  6.       <view class="hbMpBox_r_head">{{item.goods_name}}</view>
  7.       <view class="hbMpBox_r_time">
  8.         <view class="syTime_tx " style="font-weight: 600;">距结束:</view>
  9.         <view class="syTime_day">{{item.goods_time[0]}}天</view>
  10.         <view class="syTime_time syTime_time1">{{item.goods_time[1]}}</view>
  11.         <view class="syTime_time1">:</view>
  12.         <view class="syTime_time syTime_time2">{{item.goods_time[2]}}</view>
  13.         <view class="syTime_time1">:</view>
  14.         <view class="syTime_time syTime_time3">{{item.goods_time[3]}}</view>
  15.       </view>
  16.       <view class="hbMpBox_r_price">
  17.         <view class="hbMpBox_r_price_l">
  18.           <view class="hbMpBox_r_price_l_box onFontNow" style="max-width: 400rpx;">
  19.             <text style="color: #999;">拼团价:</text><text style="color: #d13d4b;font-size: 34rpx;">¥{{item.secs_price}}</text>
  20.           </view>
  21.            
  22.         </view>
  23.         <view class="hbMpBox_r_price_r">
  24.           趣拼团
  25.         </view>
  26.       </view>
  27.     </view>
  28.   </view>
  29.   <view class="indexMptxBox" wx:if="{{mpThing[0]}}" bindtap="secondGroupNav">
  30.     点击查看更多
  31. </view>
复制代码
CSS代码
  1. /*秒拼样式书写*/
  2. .hbMpBox{
  3.   padding: 20rpx;
  4.   background: #fff;
  5.   display: flex;
  6.   border-bottom: 2rpx #eee solid;
  7. }
  8. .hbMpBox .hbMpBox_l{
  9.   width: 155rpx;
  10.   height: 140rpx;
  11.   min-width: 155rpx;
  12. }
  13. .hbMpBox .hbMpBox_l image{
  14.   width: 100%;
  15.   height: 100%;
  16. }
  17. .hbMpBox .hbMpBox_r{
  18.   width: 540rpx;
  19.   margin-left: 20rpx;
  20.   color: #333;
  21.   font-size: 22rpx;
  22.   position: relative;
  23. }
  24. .hbMpBox .hbMpBox_r .hbMpBox_r_bb{
  25.   display: flex;
  26.   position: relative;
  27.   margin-top: 10rpx;
  28. }
  29. .hbMpBox .hbMpBox_r .hbMpBox_r_l2{
  30.   position: relative;
  31.   max-width: 270rpx;
  32. }
  33. .hbMpBox .hbMpBox_r .hbMpBox_r_hh{
  34.   font-size: 28rpx;
  35.   max-width: 270rpx;
  36. }
  37. .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_h{
  38.   font-size: 40rpx;
  39. }
  40. .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_des{
  41.   width: 100%;
  42.   margin-right: 20rpx;
  43.   margin-top: 10rpx;
  44.   color: #a8a8a8;
  45.   line-height: 35rpx;
  46.   height: 70rpx;
  47.   word-break: break-all;
  48.   text-overflow: ellipsis;
  49.   display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  50.   -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  51.   -webkit-line-clamp: 2; /** 显示的行数 **/
  52.   overflow: hidden; /** 隐藏超出的内容 **/
  53. }
  54. .hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_text{
  55.   font-weight: 600;
  56.   color: #d13d4b;
  57.   margin-top: 10rpx;
  58. }
  59. .hbMpBox .hbMpBox_r .hbMpBox_r_head{
  60.   font-size: 28rpx;
  61. }
  62. .hbMpBox .hbMpBox_r .hbMpBox_r_des{
  63.   margin-top: 4rpx;
  64.   color: #999;
  65. }
  66. .hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time{
  67.   font-size: 20rpx;
  68.   color: #bdbdbd;
  69.   word-spacing: 5rpx;
  70. }
  71. .hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time .fontTime{
  72.   font-weight: 900;
  73.   font-size: 26rpx;
  74.   color: #7c7d7f;
  75. }
  76. .hbMpBox_r .hbMpBox_r_r2{
  77.   min-width: 210rpx;
  78.   max-width: 48%;
  79.   border: 2rpx #d13d4b solid;
  80.   border-radius: 10rpx;
  81.   max-height: 110rpx;
  82.   position: absolute;
  83.   right: 0rpx;
  84.   height: 100%;
  85. }
  86. .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in{
  87.   height: 54rpx;
  88.   display: flex;
  89.   justify-content: center;
  90.   align-items: center;
  91.   padding: 0rpx 10rpx;
  92.   line-height: 54rpx;
  93. }
  94. .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in1{
  95.   background: #d13d4b;
  96.   color: #fff;
  97. }
  98. .hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in2{
  99.   color: #d13d4b;
  100. }
  101. .hbMpBox .hbMpBox_r .hbMpBox_r_time{
  102.   margin-top: 15rpx;
  103.   font-size: 24rpx;
  104.   display: flex;
  105.   align-items: center;
  106. }
  107. .syTime_time{
  108.   padding: 3rpx 6rpx;
  109.   background: #444;
  110.   text-align: center;
  111.   color: #fff;
  112.   border-radius: 5rpx;
  113.   margin: 0rpx 5rpx;
  114. }
  115. .hbMpBox .hbMpBox_r .hbMpBox_r_price{
  116.   margin-top: 20rpx;
  117.   display: flex;
  118.   justify-content: space-between;
  119.   align-items: center;
  120. }
  121. .hbMpBox .hbMpBox_r .hbMpBox_r_price .hbMpBox_r_price_r{
  122.   background: #d13d4b;
  123.   color: #fff;
  124.   width: 150rpx;
  125.   height: 50rpx;
  126.   line-height: 50rpx;
  127.   text-align: center;
  128.   border-radius: 5rpx;
  129. }
  130. .indexMptxBox{
  131.   padding: 20rpx;
  132.   text-align: center;
  133.   font-size: 24rpx;
  134. }
复制代码
JS代码(得到背景数据查询用FIND方法插入字段,直接遍历会有问题)
  1. mpThing.find(function(v){
  2.         var aa = v.goods_time;
  3.         var bb = util.dayTimeArr(aa);
  4.         v.goods_time = bb
  5.         that.setData({
  6.          mpThing:mpThing,
  7.         })
  8.         var ref = setInterval(function(){
  9.           aa--
  10.           var timeArr = util.dayTimeArr(aa);
  11.           v.goods_time = timeArr
  12.           that.setData({
  13.            mpThing:mpThing,
  14.           })
  15.         },1000);
  16. })
复制代码
以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作