效果圖：
實(shí)現(xiàn)代碼：
a，在data里面定義
? ? assembleData: [{undefined
? ? ? ? ? ? ? ? ? ? ? ? headImg: '../../../static/imgs/main/gpqc_zh3.png', //頭像
? ? ? ? ? ? ? ? ? ? ? ? name: '吃李子的張先生', //名字
? ? ? ? ? ? ? ? ? ? ? ? lack: 1, //缺少多少人可以拼單
? ? ? ? ? ? ? ? ? ? ? ? remainTimeStr: '00:00:00', //倒計(jì)時(shí)的顯示字符串的字符串
? ? ? ? ? ? ? ? ? ? ? ? remainTime: "30000", //剩余時(shí)間
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {undefined
? ? ? ? ? ? ? ? ? ? ? ? headImg: '../../../static/imgs/main/gpqc_zh3.png',
? ? ? ? ? ? ? ? ? ? ? ? name: '吃李子的李先生',
? ? ? ? ? ? ? ? ? ? ? ? lack: 1, //缺少多少人
? ? ? ? ? ? ? ? ? ? ? ? remainTimeStr: '00:00:00', //倒計(jì)時(shí)的顯示字符串的字符串
? ? ? ? ? ? ? ? ? ? ? ? remainTime: "124534354354354", //剩余時(shí)間
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
b、正在拼團(tuán)倒計(jì)時(shí)方法? 在methods里面
? ? ? ? ? ? countTime(self) {undefined
? ? ? ? ? ? ? ? self = this
? ? ? ? ? ? ? ? let timer = setInterval(function() {undefined
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < self.assembleData.length; i++) {undefined
? ? ? ? ? ? ? ? ? ? ? ? self.assembleData[i].remainTime -= 1000 //剩余時(shí)間
? ? ? ? ? ? ? ? ? ? ? ? let t = self.assembleData[i].remainTime
? ? ? ? ? ? ? ? ? ? ? ? if (t > 0) {//剩余時(shí)間>0
? ? ? ? ? ? ? ? ? ? ? ? let hour = Math.floor((t / 3600000) % 24) //時(shí)
? ? ? ? ? ? ? ? ? ? ? ? let min = Math.floor((t / 60000) % 60)//分
? ? ? ? ? ? ? ? ? ? ? ? let sec = Math.floor((t / 1000) % 60)//秒
? ? ? ? ? ? ? ? ? ? ? ? ? ? hour = hour < 10 ? '0' + hour : hour //當(dāng)時(shí)間的小時(shí)小于10時(shí)給前面加0
? ? ? ? ? ? ? ? ? ? ? ? ? ? min = min < 10 ? '0' + min : min
? ? ? ? ? ? ? ? ? ? ? ? ? ? sec = sec < 10 ? '0' + sec : sec
? ? ? ? ? ? ? ? ? ? ? ? ? ? let format = '' //定義來(lái)拼接顯示時(shí)間的變量
? ? ? ? ? ? ? ? ? ? ? ? ? ? format = `剩余${hour}:${min}:${sec} `
? ? ? ? ? ? ? ? ? ? ? ? ? ? self.assembleData[i].remainTimeStr = format
? ? ? ? ? ? ? ? ? ? ? ? } else {undefined
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 進(jìn)行判斷 如果數(shù)據(jù)內(nèi)所有的倒計(jì)時(shí)已經(jīng)結(jié)束凶硅，那么結(jié)束定時(shí)器， 如果沒(méi)有那 么繼續(xù)執(zhí)行定時(shí)器
? ? ? ? ? ? ? ? ? ? ? ? ? ? let flag = self.assembleData.every((val, ind) => val.remainTime <= 0)
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (flag) clearInterval(timer)
? ? ? ? ? ? ? ? ? ? ? ? ? ? self.assembleData[i].remainTimeStr = `已結(jié)束` // 結(jié)束文案
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? },
c、在HTML頁(yè)面
? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd" v-for="(item,index) in assembleData" :key="index">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd_people">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 進(jìn)行中的團(tuán)購(gòu)-頭像 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd_people_img">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- <image :src="item.user.avatarUrl" class="corwd_people_images"></image> -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <image :src="item.headImg" mode=""></image>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 進(jìn)行中的團(tuán)購(gòu)-名稱(chēng) -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- <text class="onelist-hidden">{undefined{ item.user.nickName }}的團(tuán)</text> -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd_time_text1">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 進(jìn)行中的團(tuán)購(gòu)-開(kāi)團(tuán)人數(shù) -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd_time_text-time">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <text class="onelist-hidden">{undefined{item.name}}</text>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <text
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="corwd_time_titl_onelist-hidden1">還差<text>{undefined{item.lack}}</text>人</text>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 進(jìn)行中的團(tuán)購(gòu)-倒計(jì)時(shí) -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <text class="corwd_time_numbe_onelist-hidden">{undefined{item.remainTimeStr}}</text>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <view class="corwd_time">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 進(jìn)行中的團(tuán)購(gòu)-按鈕 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button>去拼團(tuán)</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </view>
————————————————
版權(quán)聲明：本文為CSDN博主「m0_56276571」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議担钮，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_56276571/article/details/118573355
