E企盈营销工具技术服务商 热线:4006-838-530

小程序倒计时组件实现

E企盈直播平台营销卖货系统

效果传送门至 小程序代码片段创建组件conut-down组件.wxml!–count-down/count-down.wxml–text class=”c-class”{{time}}/text复制代码组件.js参类型说明targetNumber// 结束时间showDayBoolean// 是否显示天callbackString// 回调formatArray// 自定义格式clearTimerBoolean// 清除定时器// count-down/count-down.jsComponent({  externalClasses: [‘c-class’], // 自定义样式  /**   * 组件的属性列表   */  properties: {    target: Number, // 结束时间    showDay: Boolean, // 是否显示天    callback: String, // 回调    format: Array, // 自定义格式    clearTimer: Boolean // 清除定时器  },  /**   * 组件的初始数据   */  data: {    time: ”  },  ready () {    this.getFormat();  },  /**   * 组件的方法列表   */  methods: {    init () {      const self = this;      setTimeout(function () {        self.getLastTime.call(self);      }, 1000);    },    getFormat () {      const data = this.data;      if (data.format.length === 3) data.format.splice(0, 0, ”);      this.getLastTime();    },    getLastTime () {      const data = this.data;      const gapTime = Math.ceil((data.target – new Date().getTime()) / 1000);// 距离结束还有多少秒      let time = ’00:00:00′;      let day = ’00’;      const format = data.format;      if (gapTime 0) {        day = this.formatNum(parseInt(gapTime / 86400)); // 天        let lastTime = gapTime % 86400;        const hour = this.formatNum(parseInt(lastTime / 3600)); // 时        lastTime = lastTime % 3600;        const minute = this.formatNum(parseInt(lastTime / 60)); // 分        const second = this.formatNum(lastTime % 60); // 秒        if (data.format.length 0) {// 自定义格式处理          time = `${data.showDay?`${day}${format[0]}`:”}${hour}${format[1]}${minute}${format[2]}${second}${format[3]}`;        } else {          time = `${data.showDay?`${day}:`:”}${hour}:${minute}:${second}`        }        if (!data.clearTimer) this.init.call(this);      } else {        this.endfn();      }      this.setData({        time: time      });    },    formatNum (num) {// 格式化      return num 9 ? num : `0${num}`;    },    endfn () {      this.triggerEvent(‘callback’, {});    }  }})复制代码使用index.json{  “navigationBarTitleText”: “倒计时”,  “usingComponents”: {    “count-down”: “../count-down/count-down”  }}复制代码index.wxmlview倒计时/viewcount-down c-class=”red”   target=”{{targetTime}}”  clear-timer=”{{clearTimer}}”  /count-downview显示天数/viewcount-down c-class=”red”   target=”{{targetTime1}}”  show-day=”{{true}}”  clear-timer=”{{clearTimer}}”  /count-downview执行回调/viewcount-down c-class=”red”   target=”{{targetTime2}}”  show-day=”{{true}}”  bindcallback=”myLinsterner”  clear-timer=”{{clearTimer}}”  /count-down  view自定义格式/viewcount-down c-class=”red”   target=”{{targetTime}}”  show-day=”{{false}}”  bindcallback=”myLinsterner”  format=”{{myFormat}}”  clear-timer=”{{clearTimer}}”  /count-downview自定义格式/viewcount-down c-class=”red”   target=”{{targetTime1}}”  show-day=”{{true}}”  format=”{{myFormat2}}”  clear-timer=”{{clearTimer}}”  /count-down复制代码index.jsconst app = getApp()Page({  data: {    targetTime: 0,    targetTime1: 0,    targetTime2: 0,    myFormat: [‘时’, ‘分’, ‘秒’],    myFormat2: [‘天’, ‘时’, ‘分’, ‘秒’],    clearTimer: false  },  onLoad: function () {    this.setData({      targetTime: new Date().getTime() + 6430000,      targetTime1: new Date().getTime() + 1116430000,      targetTime2: new Date().getTime() + 10000    });  },  onUnload() {    this.setData({        clearTimer: true    });  },  myLinsterner () {    console.log(“结束回调”)  }})复制代码index.wxss/* 自定义样式 */.red {  color: tomato;}复制代码end

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序倒计时组件实现
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏