美文网首页
一个函数解决订单列表所有倒计时!

一个函数解决订单列表所有倒计时!

作者: 地铁站的风 | 来源:发表于2019-01-02 17:26 被阅读0次

    需求:订单列表页,所有未付款订单显示倒计时 ,30分钟后自动解除

    实现:一个容器 完成所有订单倒计时功能

    第一步:创建容器

    count_down  :剩余时间容器

    Interval  :定时器容器

    sign  : 为每个调用time方法的对象进行标记

    容器

    第二步:创建方法

    start :传入的下单时间

    length :当前定时器 与 剩余时间插入的位置

    箭头处注意:如果使用注释的方法,定时器每秒改变数组的时候,视图是不会更新的。(此为JavaScript语言限制) ----------------------    此处需要使用splice,当数组改变时视图也会更新。

    方法

    第三步:将所有未付款订单传入方法中

    sign  :从0开始标记(此标记渲染时极为重要)

    调用

    第四步:渲染

    item.sign有值,则为标记订单,显示倒计时

    <!-- 以下代码为v-for中代码-->

    v-if=" "处注意:如果不加  item.sign === 0 的判定 ,下标为0的数据是不会渲染的。(0为假)

    按标记渲染

    第五步:自行判定倒计时结束时,向服务器发起请求结束订单


    超时结束当前定时器

    相关文章

      网友评论

          本文标题:一个函数解决订单列表所有倒计时!

          本文链接:https://www.haomeiwen.com/subject/kyttrqtx.html