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的执行过程(图文)
May 20 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
采用call方式实现js继承
May 20 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
js获取页面description的方法
May 21 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python生成器表达式和列表解析
2016/03/10 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python request使用方法及问题总结
2020/04/26 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python实现壁纸下载与轮换
2020/10/19 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
厂区绿化方案
2014/05/08 职场文书
员工加薪申请报告
2015/05/15 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis