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