wx-if 结合 new Date() 实现条件渲染

双 11 活动信息弹窗广告倒计时 background,通过 wx-if 结合 new Date() 实现格式化实现最后三天自行判断。省去了双 11 期间重新修改代码上传版本的不必要操作。并且在活动最后一天自动消失,之后再删除冗余代码重新迭代版本即可。

   : function () {
    var timeDay = new Date().getDate();
    var timeMonth = new Date().getMonth()
    var timeYear = new Date().getFullYear();

    this.setData({
      timeDay: timeDay,
      timeMonth: timeMonth + 1, 
      timeYear: timeYear,
    });  
  },
<!-- 活动时间 -->
<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 9}}" class="newBg" hidden="{{hiddenName}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-3.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 10}}" class="newBg" hidden="{{hiddenName}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-2.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 11}}">
  <image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-1.png'></image>
  <view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

 

收藏 打印