前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序:有条件的展示卡片

微信小程序:有条件的展示卡片

作者头像
不爱吃糖的程序媛
发布2024-01-18 20:45:58
980
发布2024-01-18 20:45:58
举报
文章被收录于专栏:夏天的前端笔记

需求:当公告的发布时间小于当前时间的话才做显示 思维偏差: 第一我把该条件写在了子组件卡片的位置,这显然是不成立的; 第二我居然是想着将后台返回的时间让他们格式化后,再进行年月日的比较,这样让代码复杂化了难度也更加难了。 正确做法: 首先将卡片push出来的地方是在接口那里,那么你应该是到接口那里增加条件;其次比较两者时间,直接用时间戳比较(因为时间戳都是数字,更方便更简单)。 做法: 1.先定义当前时间的时间戳 2.其次遍历定义发布时间的时间戳 3.用if条件判断,发布时间 <= 当前时间 则显示卡片 源代码:

代码语言:javascript
复制
 //获取政策速遞
getList2() {
    // this.isLoad3 = true;
    // noticeType:1通知公告 2政策速遞
    // let noticeType = current == 2 ? 2 : 2;
    var that = this;
    if (that.currentRowCount3 < that.rowCount3) {
      that.status = "nomore";
      return;
    }
    getNoticeList({
      noticeType: 2,
      showAddress: "1",
      current: that.page3,
      rowCount: that.rowCount3,
    })
      .then((res) => {
        // this.dataList3 = res.data.rows;
        let data = res.data.rows;

        // data.forEach((v) => {
        //   that.dataList3.push(v);
        // });
        //当前时间的时间戳
        let currentTime = Date.parse(new Date());
        console.log(currentTime, "当前时间");
        //遍历发布时间的时间戳
        let pudateTime;
        for (let i = 0, length = data.length; i < length; i++) {
          pudateTime = Date.parse(data[i].pubdate);
          console.log(pudateTime, "发布时间");
          //发布时间 <= 当前时间 则显示卡片
          if (pudateTime <= currentTime) {
            that.dataList3.push(data[i]);//就是这一句我不会写,这句话的意思是dataList3是卡片的绑定数据,卡片push出res.data.rows[i];整个这个for循环就相当于上面那个forEach,因此不用再在里面再循环一遍,外层循环了里面条件满足了,将卡片直接push出来
          }
        }
        that.currentRowCount3 = data.length;
        that.page3++;
        that.status = "nomore";
        that.isLoad3 = false;
      })
      .catch((error) => {
        console.log(error);
      });
  },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档