吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 957|回复: 2
收起左侧

[讨论] 小程序setData的写法

[复制链接]
cqwcns 发表于 2020-6-13 22:17
微信小程序,页面有个限时抢购,每个商品都有一个倒计时,实现的方法是有个setTimeOut每秒递减一次时间,具体代码如下:

问题:使用循环,假设有5个商品,每秒要setData五次,感觉这样写很不科学,应该不利于性能。所以,请教一下各位大哥有什么优化建议。

JS:
[JavaScript] 纯文本查看 复制代码
data: {
//限时抢购内容
    dataRushToBuy: [{
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554165031&di=4929aa3cfa3ccf4758ad19be6255a6ab&imgtype=0&src=http%3A%2F%2Fimg3.99114.com%2Fgroup1%2FM00%2FF2%2F49%2FwKgGTFkUuLmAWgneAAMEPU7tIGM054.jpg',
      grade: 'A级',
      title: '现捞鲜活生蚝',
      subTitle: '新鲜正宗乳山大生蚝',
      tag: ['积分双倍', '不可用卷'],
      number: 8,
      price: '33.3',
      originalPrice: '66.9',
      endTime: '2020-07-28 03:00:11',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554550828&di=2e9273fc79630404ccafc6abc5b28c67&imgtype=0&src=http%3A%2F%2F8481538.s21i-8.faiusr.com%2F2%2Fabuiabacgaag1-_8uwuo8m6dwjcobdjtaw.jpg',
      grade: 'A级',
      title: '上海青500g-800g',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['店长推荐'],
      number: 20,
      price: '3.3',
      originalPrice: '8.9',
      endTime: '2020-06-22 03:00:12',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840192109,2046781298&fm=26&gp=0.jpg',
      grade: 'B级',
      title: '越南进口龙利鱼柳无骨无刺巴沙鱼鱼片',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['积分双倍', '店长推荐'],
      number: 19,
      price: '63.3',
      originalPrice: '68.9',
      endTime: '2020-05-28 03:00:13',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591630473933&di=7b12ab2422b79209d4d277628cd08f4d&imgtype=0&src=http%3A%2F%2Fm1.biz.itc.cn%2Fpic%2Fnew%2Fn%2F96%2F47%2FImg5864796_n.jpg',
      grade: 'A级',
      title: '神户牛肉',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['积分双倍'],
      number: 19,
      price: '363.3',
      originalPrice: '368.9',
      endTime: '2020-06-14 03:00:14',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2102551933,267546245&fm=26&gp=0.jpg',
      grade: 'A级',
      title: '鲜活澳洲深水大龙虾500g-800g',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['店长推荐'],
      number: 20,
      price: '263.3',
      originalPrice: '268.9',
      endTime: '2020-06-16 03:00:15',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }]
}

 //倒计时函数
  funCountDown: function () {
    //获得数组
    let arrList = this.data.dataRushToBuy;
    //获得当前时间
    let nowTime = new Date().getTime();
    //循环数组递减时间
    for (var i = 0, len = arrList.length; i < len; i++) {
      //将结束时间转换为时间戳
      let vEndTime = new Date(arrList[i].endTime).getTime();
      //声明一个空数组
      let arrCountDown = []
      //如果结束时间-现在时间大于0则递减时间
      if (vEndTime - nowTime > 0) {
        let time = (vEndTime - nowTime) / 1000;
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24));
        let hou = parseInt(time % (60 * 60 * 24) / 3600);
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
        //写入数组
        arrCountDown = [{
          day: day,
          hou: hou,
          min: min,
          sec: sec
        }]
        //如果结束时间-现在时间不大于0则全部写入为00
      } else {
        arrCountDown = [{
          day: '00',
          hou: '00',
          min: '00',
          sec: '00'
        }]
      }
      //渲染写入处理后的时间
      this.setData({
        ['dataRushToBuy[' + i + '].countDown']: arrCountDown
      })
    }
    //每秒重复一次
    setTimeout(this.funCountDown, 1000);
  },

  //页面加载函数
  onLoad() {
    this.funCountDown();
  }



发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

sushangyu 发表于 2020-6-13 22:40
从性能角度看确实是会比较消耗性能,但是不setdata的话页面数据也不会更新啊。希望其他大神能给出更好的方案吧。
被遗忘的路人 发表于 2020-6-14 00:13
把  dataRushToBuy  数据全部取出来, 然后 改掉时间, 然后一次性  给 data 赋值上去
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2025-1-15 20:45

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表