公告列表
公告列表
收藏
回答

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

场景：商品列表中，每个商品对应一个倒计时，分三种状态：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
      赞 1
      回复
    • 2019-05-07

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

      2019-05-07
      赞
      回复
  • 2019-05-07

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

    2019-05-07
    有用
    回复 2
    • 2019-05-07

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

      2019-05-07
      赞
      回复
    • LS
      LS
      2019-05-11

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

      2019-05-11
      赞
      回复
请 登录 后发表内容
相关问题
相关文档