微信小程序 自定义组件 倒计时

微信小程序 - 限时优惠 实现效果图：

采用了dayjs.min.js 快速获取： 天 时 分 秒 自定义组件的js部分

const dayjs = require('../../utils/dayjs.min.js');

Component({
  timer: null,
  properties: {
    end: {
      type: "String",
      value: ""
    }
  },
  data: {
    date: null,
    activityIsEnd: false
  },
  externalClasses: ['count-down'],
  lifetimes: {
    attached: function() {
      // 组件挂载
      this.getCountDown();
    },
    detached:function() {
      // 组件移除
      clearInterval(this.timer);
    }
  },
  pageLifetimes: {
    show: function() {
      // 页面被展示
      this.getCountDown();
    },
    hide: function() {
      // 页面被隐藏
      clearInterval(this.timer);
    },
  },
  methods: {
    getCountDown(){
      const { end } = this.properties;
      this.timer = setInterval(() => {
        let start = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
        //计算毫秒差
        const timeDiff = dayjs(end).diff(start, 'ms');
        if(timeDiff < 0) {
          clearInterval(this.timer);
          this.setData({
            activityIsEnd: true
          });
          return;
        }

        const date = {day: null, hour: null, minute: null, second: null }
        // 相差多少天
        date.day = dayjs(end).diff(start, 'd');

        let hourEnd;
        if(date.day > 0) {
          hourEnd = dayjs(start).add(1, 'day').format('YYYY-MM-DD');
          date.hour = dayjs(hourEnd).diff(start, 'h');
        } else {
          date.hour = dayjs(end).diff(start, 'h');
        }
        date.hour = date.hour < 10 ? `0${date.hour}` : `${date.hour}`;
        // 相差多少分
        let minuteEnd = dayjs(start).add(1, 'hour').format('YYYY-MM-DD HH');
        date.minute = dayjs(minuteEnd).diff(start, 'm');
        date.minute = date.minute < 10 ? `0${date.minute}` : `${date.minute}`;
        // 相差多少秒
        let secondEnd = dayjs(start).add(1, 'minute').format('YYYY-MM-DD HH:mm');
        date.second = dayjs(secondEnd).diff(start, 's');
        date.second = date.second === 60 ? 0 : date.second;
        date.second = date.second < 10 ? `0${date.second}` : `${date.second}`;
        this.setData({
          date
        });

      }, 1000);
    }
  }
})

自定义组件 wxml部分

<view class="count-down-wrapper count-down">
  <view wx:if="{{activityIsEnd}}">活动已结束</view>
  <view wx:if="{{date && !activityIsEnd}}" class="flex-row date">
    <text>仅剩</text>
    <text wx:if="{{date.day > 0}}" style="margin-right:3px">{{date.day}}天</text>
    <text>{{date.hour}}:{{date.minute}}:{{date.second}}</text>
  </view>
</view>