uniapp微信小程式實現一個頁面多個倒計時
阿新 • • 發佈:2020-11-02
本文例項為大家分享了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 } } } }
至此,一個頁面多個倒計時就完成了,記錄學習。
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。