vue+vant实现商品列表批量倒计时功能
最近因为一个项目需要用到商品批量倒计时，当时使用vant封装好的组件CountDown编写
起初不知道“timeData”这个对象只需要传time的时间戳就可以自动生成，走了一大波弯路，现在想想也是醉了
最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题，只获取了本地时间 new Date().getTime()，然后发现这个不行,只要用户修改下手机本地时间，这个倒计时就不行了，有安全隐患，在网上也搜了一些相关知识，但都不尽人意，故想写这一篇文章避免大家再走我之前的弯路！
废话不多少说，上代码
html:
js:
1、skl_arr[i].nowdate_time，skl_arr[i].end_time都是后台提供的字段，格式为"2020-01-02 18:40:48"，当然你也可以让后台返回时间戳给你，这样就更方便前端了（省掉new Date(String(XX).replace(/\-/g, '/')).getTime()这一步转换时间戳，其中.replace(/\-/g, '/')为兼容苹果时间显示问题）
2、其中skl_arr[i].nowdate_time是服务器当前时间，skl_arr[i].end_time商品倒计时结束时间，skl_arr[i].curTime是自己定义的一个字段，用于上述html中的:time="item.curTime"使用
3、最后在倒计时结束后调用结束回调函数,用于更新按钮，文字状态，变成已结束状态
css样式就不上传了，最后结果如下
总结
以上所述是小编给大家介绍的vue+vant实现商品列表批量倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。篇文章主要介绍了vue-cli3脚手架的配置以及使用,需要的朋友可以参考下2018-08-08
解析vue 3.0 使用axios库发起 post get 的配置过程
get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢 这里记录一下配置过程，对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧2022-05-05
权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源，这篇文章主要介绍了vue的权限管理的相关知识,需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了关于Vue.js列表渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了vue实现锚点跳转scrollIntoView()使用案例，文中结合实例代码介绍了vue锚点跳转的三种方式(页内跳转，跨页跳转，函数跳转),需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue3中的defineExpose使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了vue封装组件js版基本步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了vue 组件注册的相关资料，帮助大家更好的理解和学习vue 组件的相关知识，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了基于Vue中的父子传值问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue上传组件vue Simple Uploader的用法示例
本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例，非常具有实用价值，需要的朋友可以参考下2017-08-08
最新评论