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
}
}
}
}
至此,一個頁面多個倒計時就完成了, 記錄學習。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 在firebug調(diào)試時用console.log的方法
當你使用console.log()函數(shù)時,下面的firebug一定要打開,不然這函數(shù)在用firefox運行時無效且影響正常程序,如果用IE打開,將會出錯2012-05-05
在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js利用clipboardData實現(xiàn)截屏粘貼功能
這篇文章主要為大家詳細介紹了js利用clipboardData實現(xiàn)截屏粘貼功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
javascript 面向?qū)ο髮崙?zhàn)思想分享
萬物皆對象,所以,任何事物都是有特征(屬性)和動作(方法)的,一般拿到一份需求分檔,或者你瀏覽一個網(wǎng)頁看到一個畫面的時候,腦子里就要有提煉出來的屬性和方法的能力,那你才是合格的2017-09-09
微信小程序?qū)崿F(xiàn)猜數(shù)字小游戲的實戰(zhàn)過程
一起猜數(shù)字是微信一款休閑類小游戲,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)猜數(shù)字小游戲的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
原生javascript實現(xiàn)DIV拖拽并計算重復面積
這篇文章主要介紹了使用原生javascript實現(xiàn)DIV拖拽并計算重復面積的方法及示例代碼分享,效果十分漂亮,需要的朋友可以參考下2015-01-01

