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不能识别日期格式中的 "-" ；item.productExpiredTime是接口返回
			      var time = time.split('.')[0]    //此处是因为我们接口返回的时间格式是这样："2019-12-31 11:00:00.0"
			      var enddate = new Date(time).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
						}
					}
				}
}

至此，一个页面多个倒计时就完成了, 记录学习
如若转发注明出处

来源：CSDN

作者：csdn_zhhjgy

链接：https://blog.csdn.net/CSDN_zhhjgy/article/details/103613261