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实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
微信小程序实现watch监听
Jun 04 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
人族 Terran 基本策略
2020/03/14 星际争霸
地摊中国 - 珍藏老照片
2020/08/18 杂记
php 无限级 SelectTree 类
2009/05/19 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python通过正则表达式选取callback的方法
2015/07/18 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
教师评优事迹材料
2014/01/10 职场文书
敬老院活动总结
2014/04/28 职场文书
电子专业求职信
2014/06/19 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
怎样写家长意见
2015/06/04 职场文书
环保建议书作文400字
2015/09/14 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Python学习之包与模块详解
2022/03/19 Python