我爱模板网 > 建站教程 > 前端框架 >  Vue实现列表倒计时效果正文

Vue实现列表倒计时效果

我爱模板网要实现下面的效果:

Vue实现列表倒计时效果


即从后台获取数据,然后根据返回的时间,如“2019-12-17 23:59:59”,做成倒计时效果。

第一步、布局:
<div class="noteconcernlist">
      <div class="noteconcernlist_header">
          <div class="noteconcernlist_header_l">
              <img :src="func.imgHost()+item.storePic" class="noteconcernlist_header_l_img">
              <div class="noteconcernlist_header_l_name">
                  <div class="noteconcernlist_header_l_name1"><span>{{item.storeName}}</span><div class="noteconcernlist_header_r">{{item.storeDistance}}</div></div>
                  <div class="noteconcernlist_header_l_name2">{{item.storeIndustryName}}</div>
              </div>
          </div>
      </div>
      <img :src="item.productUrl" class="noteconcernlist_img" @click="goCoupon(item)">
      <!--倒计时-->
      <div class="zlfooter" v-if="((item.couponType === '2' && item.getType === '2') || (item.couponType === '3' && item.getType === '2') || (item.couponType === '6' && item.getType === '2')) && (item.helpStatus === '3')">
          <div class="zlfooter_l">
              <div class="zlfooter_l_d">{{item.countDownHours}}</div>
              <div class="zlfooter_l_s">:</div>
              <div class="zlfooter_l_d">{{item.countDownMinutes}}</div>
              <div class="zlfooter_l_s">:</div>
              <div class="zlfooter_l_d">{{item.countDownSeconds}}</div>
          </div>
          <div class="zlfooter_r">还需{{item.beHelpNum}}人助力</div>
   </div>
</div>
第二步、获取数据,造出时分秒字段,同时数据获取完,启动定时器:
getList:function(fn){
    var that = this;
    func.api(apiConfig.userCouponList(),{
        page : that.pageNum,
        limit : that.pageSize,
        longitude : that.longitude,
        latitude : that.latitude
    },function(r){
        if(r.status !== 200){
            func.msg(r.message);
        }else{
            //增加倒计时的时分秒,r.data.rows即获取的数据列表,getShiChaTime是计算时间,返回时分秒
            r.data.rows.map(function(item,index){
                item.countDownHours = that.getShiChaTime(item.helpEndTime).hours;
                item.countDownMinutes = that.getShiChaTime(item.helpEndTime).minutes;
                item.countDownSeconds = that.getShiChaTime(item.helpEndTime).seconds;
            })
            if(that.pageNum === 1){
                that.list = r.data.rows;
            }else{
                that.list = that.list.concat(r.data.rows);
            }
            if(that.list.length<r.data.total){
                that.pageNum++;
                that.hasMore = true;
            }else{
                that.hasMore = false;
            }
            //启动倒计时
            that.interval();
        }
    })
},
第三步、倒计时inerval逻辑
interval:function(){
    var that = this;
    setInterval(function(){
        item.countDownHours = that.getShiChaTime(item.helpEndTime).hours;
        item.countDownMinutes = that.getShiChaTime(item.helpEndTime).minutes;
        item.countDownSeconds = that.getShiChaTime(item.helpEndTime).seconds;
        that.$forceUpdate();
    },1000)
},
第四步、getShiChaTime逻辑
//获取时差中的时分秒
getShiChaTime:function(str){
    var oldTime = new Date(str).getTime();
    var nowTime = new Date().getTime();
    var shicha = oldTime-nowTime;
    var hours = parseInt(shicha / 1000 / 60 / 60);
    var minutes = parseInt((shicha % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = parseInt((shicha % (1000 * 60)) / 1000);
    return {
        hours:hours,
        minutes:minutes,
        seconds:seconds
    };
},



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Vue中解决多个组件引用了同一个对象作为数据时,当一个组件改动了数据对象时,其他对象的数据也会随着同步改动的情况 下一篇:Vue2-Editor
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢