您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在微信小程序中實現(xiàn)秒殺批量倒計時功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
微信小程序?qū)崿F(xiàn)倒計時,可以將倒計時的時間進(jìn)行每一秒的計算和渲染!
JS
模擬商品列表數(shù)據(jù) goodsList;
在 onLoad 周期函數(shù)中對活動結(jié)束時間進(jìn)行提??;
建立時間格式化函數(shù) timeFormat;
建立倒計時函數(shù) countDown;
在 onLoad 周期函數(shù)的提取結(jié)尾執(zhí)行倒計時函數(shù) countDown。
倒計時函數(shù)詳解
獲取當(dāng)前時間,同時得到活動結(jié)束時間數(shù)組;
循環(huán)活動結(jié)束時間數(shù)組,計算每個商品活動結(jié)束時間的倒計時天、時、分、秒;
用 setData 方法刷新數(shù)據(jù);
每個一秒執(zhí)行一次倒計時函數(shù) setTimeout(this.countDown,1000);
let goodsList = [ {actEndTime: '2018-05-01 10:00:43'}, {actEndTime: '2018-04-01 11:00:00'}, {actEndTime: '2018-06-01 12:45:56'}, {actEndTime: '2018-07-01 15:00:23'}, {actEndTime: '2018-05-23 17:00:22'}, {actEndTime: '2018-05-14 19:00:44'}, {actEndTime: '2018-05-21 21:00:34'}, {actEndTime: '2018-06-17 09:00:37'}, {actEndTime: '2018-03-21 05:00:59'}, {actEndTime: '2018-04-19 07:00:48'}, {actEndTime: '2018-04-28 03:00:11'} ] Page({ data: { countDownList: [], actEndTimeList: [] }, onLoad(){ let endTimeList = []; // 將活動的結(jié)束時間參數(shù)提成一個單獨的數(shù)組,方便操作 goodsList.forEach(o => {endTimeList.push(o.actEndTime)}) this.setData({ actEndTimeList: endTimeList}); // 執(zhí)行倒計時函數(shù) this.countDown(); }, timeFormat(param){//小于10的格式化函數(shù) return param < 10 ? '0' + param : param; }, countDown(){//倒計時函數(shù) // 獲取當(dāng)前時間,同時得到活動結(jié)束時間數(shù)組 let newTime = new Date().getTime(); let endTimeList = this.data.actEndTimeList; let countDownArr = []; // 對結(jié)束時間進(jìn)行處理渲染到頁面 endTimeList.forEach(o => { let endTime = new Date(o).getTime(); let obj = null; // 如果活動未結(jié)束,對時間進(jìn)行處理 if (endTime - newTime > 0){ let time = (endTime - newTime) / 1000; // 獲取天、時、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) } }else{//活動已結(jié)束,全部設(shè)置為'00' obj = { day: '00', hou: '00', min: '00', sec: '00' } } countDownArr.push(obj); }) // 渲染,然后每隔一秒執(zhí)行一次倒計時函數(shù) this.setData({ countDownList: countDownArr}) setTimeout(this.countDown,1000); } })
WXML
簡單的布局和居中顯示。
<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList"> 剩余 <text class='tui-conutdown-box'>{{item.day}}</text>天 <text class='tui-conutdown-box'>{{item.hou}}</text>時 <text class='tui-conutdown-box'>{{item.min}}</text>分 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒 </view>
WXSS
page{background-color: #eee;} .tui-countdown-content{ height: 50px; line-height: 50px; text-align: center; background-color: #fff; margin-top: 15px; padding: 0 15px; font-size: 18px; } .tui-conutdown-box{ display: inline-block; height: 26px; width: 26px; line-height: 26px; text-align: center; background-color: #000; color: #fff; margin: 0 5px; } .tui-countdown-bg{ background-color: #DF0101; }
關(guān)于怎么在微信小程序中實現(xiàn)秒殺批量倒計時功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。