vue+vant實現(xiàn)商品列表批量倒計時功能
最近因為一個項目需要用到商品批量倒計時，當時使用vant封裝好的組件CountDown編寫
起初不知道“timeData”這個對象只需要傳time的時間戳就可以自動生成，走了一大波彎路，現(xiàn)在想想也是醉了
最開始寫這個倒計時的時候沒有考慮到使用當前服務器時間問題，只獲取了本地時間 new Date().getTime()，然后發(fā)現(xiàn)這個不行,只要用戶修改下手機本地時間，這個倒計時就不行了，有安全隱患，在網(wǎng)上也搜了一些相關知識，但都不盡人意，故想寫這一篇文章避免大家再走我之前的彎路！
廢話不多少說，上代碼
html:
js:
1、skl_arr[i].nowdate_time，skl_arr[i].end_time都是后臺提供的字段，格式為"2020-01-02 18:40:48"，當然你也可以讓后臺返回時間戳給你，這樣就更方便前端了（省掉new Date(String(XX).replace(/\-/g, '/')).getTime()這一步轉換時間戳，其中.replace(/\-/g, '/')為兼容蘋果時間顯示問題）
2、其中skl_arr[i].nowdate_time是服務器當前時間，skl_arr[i].end_time商品倒計時結束時間，skl_arr[i].curTime是自己定義的一個字段，用于上述html中的:time="item.curTime"使用
3、最后在倒計時結束后調用結束回調函數(shù),用于更新按鈕，文字狀態(tài)，變成已結束狀態(tài)
css樣式就不上傳了，最后結果如下
總結
以上所述是小編給大家介紹的vue+vant實現(xiàn)商品列表批量倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
解析vue?3.0?使用axios庫發(fā)起?post?get?的配置過程
get post 請求開發(fā)中最普通最常見的請求方式但是在vue中如何實現(xiàn)呢 這里記錄一下配置過程，對vue?使用axios發(fā)起?post?get配置過程感興趣的朋友一起看看吧2022-05-05
權限是對特定資源的訪問許可，所謂權限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權限管理的相關知識,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關于Vue.js列表渲染的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
vue實現(xiàn)錨點跳轉scrollIntoView()使用案例
這篇文章主要介紹了vue實現(xiàn)錨點跳轉scrollIntoView()使用案例，文中結合實例代碼介紹了vue錨點跳轉的三種方式(頁內跳轉，跨頁跳轉，函數(shù)跳轉),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue3中的defineExpose使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue封裝組件js版基本步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了vue 組件注冊的相關資料，幫助大家更好的理解和學習vue 組件的相關知識，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例，非常具有實用價值，需要的朋友可以參考下2017-08-08