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 相关文章推荐
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
RequireJs的使用详解
Feb 19 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
js最简单的双向绑定实例讲解
Jan 02 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 无限级 SelectTree 类
2009/05/19 PHP
PHP输出日历表代码实例
2015/03/27 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python字符串常用方法
2018/06/14 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
网络技术专业推荐信
2014/02/20 职场文书
年终总结会主持词
2014/03/25 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书