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
   }
   }
  }
}

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

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

(0)

相关推荐

  • uniapp电商小程序实现订单30分钟倒计时

    本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下 倒计时函数如下: // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取 runBack(cm) { if (cm > 0) { // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒 cm > 60000 ? (this.rocallTime = (new Date(cm).getMinutes()

  • uni-app实现获取验证码倒计时功能

    本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码,供大家参考,具体内容如下 实现的效果 页面部分是一个三目运算,codeTime是倒计时的时间. <template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'获取验证码':codeTime+

  • uni-app使用countdown插件实现倒计时

    本文实例为大家分享了使用countdown插件实现倒计时的具体代码,供大家参考,具体内容如下 实现的效果如下: 这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时.使用插件很方便. 首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网的组件可以直接使用.创建之后将components整个文件夹复制到自己的项目中. 在需要使用倒计时的页面引入组件 <script> import uniCountdown from '@/co

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

    本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 设计图(需求) 在这里插入图片描述 结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app 微信小程序授权登录的实现步骤

    目录 一.appID相关申请和配置 1. appid获取方式 2. appID配置 二.获取用户基础数据 2.1. 获取用户信息 2.2. 获取用户信息2 三.调用登录api 3.1. 登录api 3.2. 案例代码 四.获取唯一标识信息 4.1. 官网文档 4.2. 接口简述 五.绑定用户 实现登录 5.1. 代码案例(未封装) 5.2. 代码案例(封装) 六.项目开源地址 6.1. 前端 6.2. 后端 一.appID相关申请和配置 1. appid获取方式 登录微信公众平台 官网链接:ht

  • uniapp微信小程序自定义导航栏的全过程

    目录 前言 那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结 前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点 首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序

  • 关于uniapp微信小程序左上角返回按钮的监听详解

    目录 项目场景: 问题描述: 原因分析: 解决方案一: 解决方案二: 结语 项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接返回. 问题描述: uni-app 页面生命周期中有 onBackPress ,不过不支持微信小程序.翻看微信小程序官方文档,并未发现可以监听到左上角返回按钮的事件.查阅相关技术文档,确认微信小程序现阶段并没有提供监听左上角

  • uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

  • 微信小程序返回多级页面的实现方法

    微信小程序返回多级页面的实现方法 微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况.点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API: wx.navigateBack(OBJECT) 也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以: //在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack(

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

随机推荐