uniapp微信小程序实现一个页面多个倒计时


Posted in Javascript onNovember 01, 2020

本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下

设计图(需求)

uniapp微信小程序实现一个页面多个倒计时

结构

<view class="group-list" v-for="item in message" :key="item.productId">
 <view class="group-img" @click="navTo">
 <image :src="item.productPicture"></image>
 </view>
 <view class="group-info">
 <view class="product-name">{{ item.productName }}</view>
 <view class="product-price">
 <text class="discounts">¥{{ item.productCurrentPrice }}</text>
 <text class="original">¥{{ item.productMarketPrice }}</text>
 </view>
 <view class="group-partner">
 <scroll-view scroll-x>
 <view class="user-img">
 <view v-for="(single, index) in item.avatarList" :key="index">
 <image :src="single"></image>
 </view>
 <view v-for="i in item.stillMissingNumber" :key="i">
 <image src="../../static/ssll-img/more.png"></image>
 </view>
 </view>
 </scroll-view>
 <button open-type="share">邀请好友</button>
 </view>
 <view class="clock">
 <text>拼团剩余:</text>
 <!-- 绑定倒计时 -->
 <text>{{ item.end_time1 }}</text> 
 </view>
 </view>
</view>

js

export default {
 data() {
 return {
 timeData: '', //存放每条数据的处理好的倒计时
 timer: '', //用来清除定时器
 message: [] //接口请求返回的数据
 }
 },
 onUnload(){ //卸载页面清除定时器
 clearInterval(this.timer) 
 },
 methods: {
 getTimeList(){ 
 let that = this
 that.message.forEach((item) =>{
  var nowdate = new Date().getTime() //获取当前时间毫秒数
  var time = item.productExpiredTime.replace(new RegExp("-", "gm"), "/") //ios不能识别日期格式中的 "-" ; .productExpiredTime是接口返回的名称
  var timesp = time.split('.')[0] //此处是因为我们接口返回的时间格式是这样:"2019-12-31 11:00:00.0"
  var enddate = new Date(timesp).getTime() //处理好格式之后获取结束时间的毫秒数
  var totaltime = enddate - nowdate //获取时间差
  that.totaltime(totaltime) //这是下面封装的方法,将毫秒数处理成"xx时xx分xx秒"
  item.end_time1 = that.timeData //处理好的单个时间安排到item上(重要)
 })
 this.message = that.message //全部处理好的数据重新赋值
 },
 
 totaltime(a){ //计算单个剩余时间
 let totaltime = a
 let that = this
  var h, m, s, d
  function test(num) {
  if (num < 10) {
   num = "0" + num 
  }
  return num
  }
  
 if (totaltime > 0) {
  d = Math.floor(totaltime / 1000 / 60 / 60 / 24) * 24
  h = Math.floor(totaltime / 1000 / 60 / 60 % 24)
  m = Math.floor(totaltime / 1000 / 60 % 60)
  s = Math.floor(totaltime / 1000 % 60)
  //获取时分秒
  h = d + h
  h = test(h)
  m = test(m)
  s = test(s)
  
  this.timeData =`${h}时 : ${m}分 : ${s}秒` // 每个时间的显示格式
  
 } else {
  
  this.timeData = `00 : 00 : 00` 
  
 }
 },
 //以下请求此页面需要的数据
 getUserGroupList(接口参数) {
 this.$ajax({
 url: 'xxx/xxx/xxxxxx',
 data: {接口参数},
 success: res => {
 var that = this
 let data = res.data.groups
 if (data.length === 0) {
 this.$api.msg('暂时您还没有参团信息!')
 setTimeout (function() {
 uni.navigateBack({ //返回上一页
  delta: 1
 })
 },1500)
 } else {
 this.message = [...that.message, ...res.data.groups] //合并
 //数据返回成功之后再调计时器,防止异步
 //that.getTimeList()
 var timer = setInterval(function () {
  that.getTimeList()
 }, 1000)
 this.timer = timer
 }
 }
 }
}

至此,一个页面多个倒计时就完成了, 记录学习。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
Javascript Objects详解
Sep 04 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
You might like
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
如何使用python传入不确定个数参数
2020/02/18 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
大学毕业感言
2014/01/10 职场文书
晚会邀请函范文
2014/01/24 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript