收藏
回答

如何提高倒计时组件的性能?

各位大佬:


 背景是页面中会展示一个倒计时,目前实现是再js里通过频繁setData剩余的时间来引发页面上展示的时间更新,需要1s就 setData一次,导致性能很差,同时好像还会导致用户手机用电量增加,甚至发烫。


        不知道用wxs是否能够解决,或者有无其他优化方案。


 新手小白。求各位大佬指点,最好能给个示例代码。


                         给各位大佬敬礼




--------------------




没人来,自己再顶一手,顺便说说个人理解,wxs虽然有setTimeout 和 setInterval。暂不考虑版本问题,但是并不能引发页面重绘,很多方法都是get,没有set,  除了改css→.→

最后一次编辑于  08-21
回答关注问题邀请回答
收藏

4 个回答

  • 小胖
    小胖
    08-23

    愿意花时间的话,可以考虑下能否用canvas去画,这样就不用走setdata,还能随时监控方法

    08-23
    有用
    回复 2
  • 小黎
    小黎
    08-21

    最简单的用第三方库 https://tdesign.tencent.com/miniprogram/components/count-down

    08-21
    有用
    回复 2
  • showms
    showms
    08-21

    wxs只能在wxml上面触发,如果你的计时器不需要在js里面触发,那是可以的

    08-21
    有用
    回复 7
    • GP
      GP
      08-21
      怎么引起paint呢
      08-21
      回复
    • GP
      GP
      08-21
      我不是计时器,我是页面展示的倒计时
      08-21
      回复
    • showms
      showms
      08-21回复GP
      wxs里面也是可以调所在page的js函数的蛤
      08-21
      回复
    • GP
      GP
      发表于移动端
      08-21回复showms
      那不还是要改data
      08-21
      回复
    • showms
      showms
      08-21回复GP
      倒计时结束调页面js函数处理业务,倒计时期间需要你把所有数字都列出来,比如倒计时10s,那就10个数字,纵向排列,然后在wxs里面用translateY(绝对布局也行) 调整数字位置。
      08-21
      回复
    查看更多(2)
  • 王卓
    王卓
    08-21

    之前做过类似的,我是实现方法是:创建一个自定义组件来处理倒计时逻辑。在组件内部,你可以使用定时器来更新倒计时,并使用组件的 setData 方法来更新组件的内部状态。然后,你可以在组件的 WXML 模板中绑定这些状态来显示倒计时。由于自定义组件的 setData 只会触发组件本身的重新渲染,而不是整个页面的重新渲染,因此性能会更好。

    08-21
    有用
    回复 1
    • GP
      GP
      08-21
      这个已经做完了
      08-21
      回复
登录 后发表内容