小程序
小游戏
企业微信
微信支付
扫描小程序码分享
页面上有活动模块是需要倒计时的，但是控制台的Audits在性能检测里面总是会有一个问题说是 存在 setData 的调用过于频繁。这让我有点进退两难呀
这小程序还让不让倒计时活了。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
封装一个倒计时组件，计算和结束时间的时间差，每秒执行一次，返回对象{天，时，分，秒} 倒计时结束和detached的时候清除计时器，这样页面需要用到的时候，引用组件即可，避免同时运行多个倒计时，频繁setData。tab的话，选中的地方展示倒计时未选中的可以用状态标记下，未开始，进行中，已结束。列表的话，可以采用分页展示倒计时。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
用canvas画嘛不用走setData
类似这种的呀，canvas不是那么好画这种的吧，里面有四个变量，可以指点一下吗
第二层：四个方块、“天”、两个冒号，一起做成背景搁到view里
第一层：你把位置安排好写四个天、时、分、秒
第一步
组件属性{
data{
total: 倒计时总时间，
timeArr：['00', '01', '02'...''59];
},
methods:{
GetTotalTime(){ //这个方法在ready里运行
let time = 全局里的倒计时时间 || time1 - Date.now(); //time1是你从后台拿取预先设置好的倒计时时间，比如4月1号
this.setDate({ total: time })
然后同步全局里设置的倒计时时间
...
}
第二步
设一个draw方法，这个在ready里每隔一秒运行一次
draw(){
1.let { total, timeArr} = this.data;
2. 然后你根据total算出天时分秒，去timeArr里拿取对应的字符串
3. 把位置算好画上去
谢谢，很好的思路，有空花时间去封装这样的canvas倒计时的组件
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
封装一个倒计时组件，计算和结束时间的时间差，每秒执行一次，返回对象{天，时，分，秒} 倒计时结束和detached的时候清除计时器，这样页面需要用到的时候，引用组件即可，避免同时运行多个倒计时，频繁setData。tab的话，选中的地方展示倒计时未选中的可以用状态标记下，未开始，进行中，已结束。列表的话，可以采用分页展示倒计时。
用canvas画嘛不用走setData
第二层：四个方块、“天”、两个冒号，一起做成背景搁到view里
第一层：你把位置安排好写四个天、时、分、秒
第一步
组件属性{
data{
total: 倒计时总时间，
timeArr：['00', '01', '02'...''59];
},
methods:{
GetTotalTime(){ //这个方法在ready里运行
let time = 全局里的倒计时时间 || time1 - Date.now(); //time1是你从后台拿取预先设置好的倒计时时间，比如4月1号
this.setDate({ total: time })
然后同步全局里设置的倒计时时间
},
...
}
}
第二步
设一个draw方法，这个在ready里每隔一秒运行一次
draw(){
1.let { total, timeArr} = this.data;
2. 然后你根据total算出天时分秒，去timeArr里拿取对应的字符串
3. 把位置算好画上去
}
谢谢，很好的思路，有空花时间去封装这样的canvas倒计时的组件