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 DOM事件模型的两件事
Jul 22 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
js代码实现轮播图
May 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
坏狼php学习 计数器实例代码
2008/06/15 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python实现分段线性插值
2018/12/17 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python 如何测试文件是否存在
2020/07/31 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
高中军训感言1000字
2014/03/01 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
为Centos安装指定版本的Docker
2022/04/01 Servers