收藏
回答

小程序团购秒杀批量倒计时性能问题

场景:商品列表中,每个商品对应一个倒计时,分三种状态:1⃣️距离团购开始:10:00:002⃣️距离团购结束:10:00:003⃣️活动已结束;

请问该如何实现,是做成组件还是在本页面直接写好一些?另外如果做成组件,每个商品都有一个倒计时,会不会影响性能导致页面卡顿?

求助有这方面经验的大大给个思路,感谢🙏

回答关注问题邀请回答
收藏

4 个回答

  • Belieber
    Belieber
    2019-08-14

    楼主这个问题咋解决的? 我也要做拼团了 和你这个差不多,怕性能问题,可以分享一下吗?

    2019-08-14
    赞同
    回复
  • .
    .
    2019-05-09

    30个列表不是都每个都需要setData,可以监控下元素,可视范围内在走setData

    2019-05-09
    赞同
    回复
  • Maverick
    Maverick
    2019-05-07

    每个商品项是一个组件,各自记时和刷新状态吧,逻辑上是最简单的,30个商品应该没什么问题。

    官方也是建议页面频繁setData移到组件内的。

    倒计时要频繁setData是没法避免的了,估计主要性能问题就在这了。用canvas来做倒计时或许好一些,不过目前canvas还不是同层渲染的,scroll-view里使用会有问题。

    2019-05-07
    赞同
    回复 3
    • Maverick
      Maverick
      2019-05-07

      也可以用wxs避免频繁setData  https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html


      利用 requestAnimationFrame和Date.now

      2019-05-07
      回复
    • Maverick
      Maverick
      2019-05-07回复Maverick

      emmm,wxs似乎无法修改内容显示倒计时....不过可以试试setStyle能不能设置自定义变量,setStyle('--countdown-str: "01:59:58"')


      然后利用伪元素显示内容

      :before{

      content: var(--countdown-str)

      }

      2019-05-07
      回复
    • YANG
      YANG
      2019-05-07

      好的好的👌,我再研究一下

      2019-05-07
      回复
  • YANG
    YANG
    2019-05-07

    商品大概6-30个,我如果直接写在页面里,然后每隔一秒遍历一下商品列表,判断每个商品的状态并计算倒计时,当所有商品都处于“已结束”状态时,清除计时器,这个在性能上有什么问题嘛?

    2019-05-07
    赞同
    回复 2
    • YANG
      YANG
      2019-05-07

      封装成倒计时组件的话,每个商品单独对应一个计时器还是把整个列表传给组件,整体更新好一些?

      2019-05-07
      回复
    • 傻傻
      傻傻
      2019-05-11

      好想告诉你  我的清除计时器没有用 /哭

      2019-05-11
      回复
登录 后发表内容