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

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

作者: 地铁站的风 | 来源:发表于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