封装一个随调随用的倒计时的组件

封装一个随调随用的倒计时的组件。

代码部分

***## WXML部分***
<view class="{{styleFlag=='1'?'tui-countdown-content':'tui-countdown-content-award'}}">
  <text class='textView'>{{text}}</text>
  <text class="{{styleFlag=='1'?'tui-conutdown-box':'tui-conutdown-box-award'}}">{{obj.day}}</text>
  <text class='tianView'>天</text>
  <text class="{{styleFlag=='1'?'tui-conutdown-box':'tui-conutdown-box-award'}}">{{obj.hou}}</text>
  <text class='splitView'>:</text>
  <text class="{{styleFlag=='1'?'tui-conutdown-box':'tui-conutdown-box-award'}}">{{obj.min}}</text>
  <text class='splitView'>:</text>
  <text class="{{styleFlag=='1'?'tui-conutdown-box':'tui-conutdown-box-award'}}">{{obj.sec}}</text>
</view>
 

子组件的js部分

Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    text:{
      type:String,
      value:''
    },
    obj:{
      type:Object,
      value:{

      }
    },
    styleFlag: {
      type: String,
      value: '1'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

父组件的js部分

//倒计时函数
  timeFormat: function (param) { //小于10的格式化函数
    return param < 10 ? '0' + param : param;
  },
 countDown2: function () { //倒计时函数
    let that = this;
    // console.log('-------countDown2---------');
    let arr = this.data.lastestAwardActivity.openTime.split(/[- :]/); // that.data.gmtDate时间格式为'2018-08-07 10:23:00'
    //let arr = '2019-08-27 10:23:00'.split(/[- :]/);//

    let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);

    nndate = Date.parse(nndate)

    let timeLeft = nndate - new Date();
    let obj = null;
    // 如果活动未结束，对时间进行处理
    if (timeLeft > 0) {
      let time = (timeLeft) / 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);
      obj = {
        day: this.timeFormat(day),
        hou: this.timeFormat(hou),
        min: this.timeFormat(min),
        sec: this.timeFormat(sec)
      }
    } else { //活动已结束，全部设置为'00'
      obj = {
        day: '00',
        hou: '00',
        min: '00',
        sec: '00'
      }
    }
    this.setData({
      dateObjDialog: obj
      // 渲染，然后每隔一秒执行一次倒计时函数
    })
    // console.log(obj);
    let timerNumDialog = setTimeout(this.countDown2, 1000);
    that.setData({
      timerNumDialog: timerNumDialog
    })
  },

注：

父子传参啥的网上都有，大概逻辑是这，仅供自己以后使用，勿喷。