创建插件
插件代码
- count-down.wxml
<view class="count-down"> <text class="days" wx:if="{{showDays}}">{{days}}</text> <text class="spot" wx:if="{{showDays}}">{{spot.days}}</text> <text class="hours" wx:if="{{showHours}}">{{hours}}</text> <text class="spot" wx:if="{{showHours}}">{{spot.hours}}</text> <text class="minutes" wx:if="{{showMinute}}">{{minutes}}</text> <text class="spot" wx:if="{{showMinute}}">{{spot.minutes}}</text> <text class="seconds">{{seconds}}</text> <text class="spot">{{spot.seconds}}</text> </view>
> 显示的格式:xx天xx时xx分xx秒,或者 00:00:00:00,更多格式根据需求配置
> 根据需求配置精确度:天、时、分、秒
- count-down.js
Component({ data: { timers: false, // 定时器 days: \'00\', // 天 hours: \'00\', // 时 minutes: \'00\', // 分 seconds: \'00\', // 秒 spotList: { // 倒计时格式,按需配置 1: { \'days\': \':\', \'hours\': \':\', \'minutes\': \':\', \'seconds\': \'\', }, 2: { \'days\': \'天\', \'hours\': \'时\', \'minutes\': \'分\', \'seconds\': \'秒\' } }, }, properties: { eTime: { type: Number, value: 0 }, spotType: { type: Number, value: 1 }, showMinute: { type: Number, value: 1 }, showHours: { type: Number, value: 1 }, showDays: { type: Number, value: 1 }, }, observers: { }, lifetimes: { attached() { this.clockInit(); }, datached() { clearInterval(this.data.timers); } }, methods: { // 初始化 clockInit() { var spotList = this.data.spotList, spotType = this.data.spotType; this.setData({ spot: spotList[spotType], showDays: this.data.showDays, showHours: this.data.showHours, showMinute: this.data.showMinute }); var secondTime = this.data.eTime; this.data.timers = setInterval(() => { if (secondTime <= 0) { return this.endOfTime() } secondTime--; this.countDown(secondTime); }, 1000); }, // 倒计时结束 endOfTime() { clearInterval(this.data.timers); this.triggerEvent(\'endOfTime\', 1); }, // 计算时分秒 countDown(secondTime) { var seconds = secondTime, minutes = 0, hours = 0, days = 0; if (this.data.showMinute) { minutes = Math.floor(seconds / 60); seconds = seconds % 60; } if (this.data.showHours) { hours = Math.floor(minutes / 60); minutes = minutes % 60; } if (this.data.showDays) { days = Math.floor(hours / 24); hours = hours % 24; } this.setData({ days: this.zeroFill(days), hours: this.zeroFill(hours), minutes: this.zeroFill(minutes), seconds: this.zeroFill(seconds) }); }, // 补零 zeroFill(n, type) { if(type == \'s\') { return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + parseInt(n) : parseInt(n) }else { return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + n : n } } } })
插件使用
- wxml:初始化倒计时秒数、显示格式、倒计时结束触发事件
<count-down eTime="{{order.count_down}}" bind:endOfTime="endOfTime" showDays="false" showHours="false" wx:if="{{order.count_down > 0}}"/>
- js
endOfTime: function (e) { console.log(\'endOf }