uniapp微信小程序?qū)崿F(xiàn)一個頁面多個倒計時
本文實例為大家分享了uniapp實現(xiàn)一個頁面多個倒計時的具體代碼,供大家參考,具體內(nèi)容如下
設(shè)計圖(需求)
結(jié)構(gòu)
<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: '', //存放每條數(shù)據(jù)的處理好的倒計時 timer: '', //用來清除定時器 message: [] //接口請求返回的數(shù)據(jù) } }, onUnload(){ //卸載頁面清除定時器 clearInterval(this.timer) }, methods: { getTimeList(){ let that = this that.message.forEach((item) =>{ var nowdate = new Date().getTime() //獲取當前時間毫秒數(shù) 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() //處理好格式之后獲取結(jié)束時間的毫秒數(shù) var totaltime = enddate - nowdate //獲取時間差 that.totaltime(totaltime) //這是下面封裝的方法,將毫秒數(shù)處理成"xx時xx分xx秒" item.end_time1 = that.timeData //處理好的單個時間安排到item上(重要) }) this.message = that.message //全部處理好的數(shù)據(jù)重新賦值 }, 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` } }, //以下請求此頁面需要的數(shù)據(jù) getUserGroupList(接口參數(shù)) { this.$ajax({ url: 'xxx/xxx/xxxxxx', data: {接口參數(shù)}, 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] //合并 //數(shù)據(jù)返回成功之后再調(diào)計時器,防止異步 //that.getTimeList() var timer = setInterval(function () { that.getTimeList() }, 1000) this.timer = timer } } } }
至此,一個頁面多個倒計時就完成了, 記錄學(xué)習(xí)。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Javascript中defer和async的區(qū)別總結(jié)
相信看過javascript高級程序設(shè)計的人,在javascript高級程序設(shè)計里,應(yīng)該看到了介紹了有關(guān)defer和async的區(qū)別,可是比較淺顯,而且也說得不是很清楚。下面我們來通過這篇文章來詳細了解下dfer和async的區(qū)別。2016-09-09TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設(shè)計思想是在編譯時就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關(guān)于TypeScript中import?type與import區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-07-07利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf
這篇文章主要為大家詳細介紹了如何利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf的功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08JavaScript中通過提示框跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JavaScript中通過提示框跳轉(zhuǎn)頁面的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
關(guān)鍵詞高亮在開發(fā)中會帶來很多的方便,關(guān)鍵詞高亮包括:根據(jù)ID高亮關(guān)鍵字/根據(jù)Tag名高亮關(guān)鍵字等等,感興趣的朋友可以了解下,希望本文對你有所幫助2013-01-01JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
這篇文章主要介紹了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果,結(jié)合實例形式分析了js結(jié)合HTML5 canvas技術(shù)實現(xiàn)圖形繪制的數(shù)值運算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下2017-03-03