先看看效果
效果图
直接上代码
js:
Page({ /** * 页面的初始数据 */ data: { listData: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let list = [ { id: 1, memberNickname: '列表1', remainTime: 86400000 }, { id: 2, memberNickname: '列表2', remainTime: 3226000 }, { id: 3, memberNickname: '列表3', remainTime: 15000 } ]; this.setData({ listData: list }); this.setCountDown(); }, /** * 倒计时 */ setCountDown: function(){ let time = 100; let { listData } = this.data; let list = listData.map((v, i) =>{ if (v.remainTime <= 0) { v.remainTime = 0; } let formatTime = this.getFormat(v.remainTime); v.remainTime -= time; v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}.${parseInt(formatTime.ms / time)}`; return v; }) this.setData({ listData: list }); setTimeout(this.setCountDown, time); }, /** * 格式化时间 */ getFormat: function (msec){ let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) { mm = parseInt(ss / 60); ss = parseInt(ss % 60); if (mm > 60) { hh = parseInt(mm / 60); mm = parseInt(mm % 60); } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; hh = hh > 9 ? hh : `0${hh}`; return { ms, ss, mm, hh }; } })
wxml:
<view> <view class="flex_l_r_c" wx:for="{{listData}}" wx:key="id"> <view>{{item.memberNickname}}</view> <view>{{item.countDown}}</view> </view></view>
作者:不二很纯洁
链接:https://www.jianshu.com/p/c230f4841b70
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦