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实现商品列表批量倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue实现倒计时获取验证码效果

    vue实现倒计时获取验证码效果

    本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码,供大家参考,具体内容如下 效果: 代码: <template> <div> <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button> </div> </template> <script&

  • vue 实现小程序或商品秒杀倒计时

    下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述: 简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边

  • 基于vue、react实现倒计时效果

    本文实例为大家分享了基于vue.react实现倒计时效果的具体代码,供大家参考,具体内容如下 Vue 方案一:俩个元素 HTML: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span v-if="!sendMsgDisabled"

  • vue倒计时刷新页面不会从头开始的解决方法

    开启倒计时,直接保存到vuex中,且存储到本地持久化 // state.js const runTime = localStorage.getItem('time'); paymentRunTime:runTime // mutations.js TimeReduction(state) { this.timerId = setInterval(() => { if (state.paymentRunTime === 0) { state.paymentRunTime = 60; return

  • vue设计一个倒计时秒杀的组件详解

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是

  • vue+vant实现商品列表批量倒计时功能

    最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写 起初不知道"timeData"这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了 最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,但都不尽人意,故想写这一篇文章避免大家再走我之前的弯路! 废话不

  • Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

    本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页 商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架

  • 详解Vue demo实现商品列表的展示

    详解Vue demo实现商品列表的展示

    Vue实现商品列表的展示是一个比较简单的入门demo,下面是具体的实现: 简单CSS样式: <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img{ width: 200px; height: 150px; } </style> html: <

  • 微信小程序实现批量倒计时功能

    微信小程序实现批量倒计时功能

    本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下 //适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */ 1.展示效果如下: 2.wxml代码: <p class="promotion-label-tits">仅{{item.endtime}}</p> 3.js代码: //封装的倒计时方法 //批量倒计时 function grouponcountdown(that, end_

  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下 复制代码 代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin

  • Vue element商品列表的增删改功能实现

    Vue element商品列表的增删改功能实现

    目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good

  • VUE实现移动端列表筛选功能

    最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下: HTML: <div class="filterbar"> <div class="filterbar-title"> <ul class="title-ul"> <li :class="{'title-li':true, 'current': item.i

  • vue+element实现批量删除功能的示例

    今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现 代码如下 html: <div class="row mt30 pl15"> <el-button type="warning

  • Android 实现列表倒计时功能

    单个计时器,然后遍历数据 刷新条目: 两种实现方式:1.Handler轮询: 2.子线程睡眠(时间到后 移除列表中的条目会有问题): 代码很简单,没有任何难度,列表使用 RecyclerView+BaseRecyclerViewAdapterHelper实现: implementation 'androidx.recyclerview:recyclerview:1.1.0' implementation 'com.github.CymChad:BaseRecyclerViewAdapterHel

  • 基于vue的tab-list类目切换商品列表组件的示例代码

    在大多数电商场景中,页面都会有类目切换加上商品列表的部分,页面大概会长这样 每次写类似场景的时候,都需要去为类目商品列表写很多逻辑,为了提高开发效率我决定将这一部分抽离成组件. 实现 1.样式 所有tab栏的样式和商品列表的样式都提供插槽,供业务自己定制 2.变量 isTabFixed: false,//是否吸顶 tab: 1,//当前tab page: 1,//当前页数 listStatus: { finished: false,//是否已是最后一页 loading: false,//是否加载

随机推荐