微信小程序倒计时组件

微信小程序倒计时组件，比较简单，记录一波，欢迎讨论。
配置和样式文件就不放了，里面也没写啥，样式的话直接给组件添加class就行了

参数	描述	默认值
isTimeStamp	是否是时间戳	false
endTime	倒计时结束时间	默认值为60 * 1000毫秒(时间戳模式下传入结束时间戳)
format	倒计时时间格式	{DD}:{HH}:{mm}:{ss}
endText	倒计时结束语	已结束
countEnd	倒计时结束函数	结束时触发
currentFn	倒计时开始后每隔一秒执行一次
start	开始函数可通过父组件调用（调用方法this.selectComponent("#top-countdown").start();）	项目中用到了临时加了个，可以不用管（也可自行扩展）

使用
<count-down id="top-countdown" class="top-countdown" format="{S}" end-time="{{endTime}}" end-text="0" bind:countEnd="timeEnds"></count-down>

count-down.wxml

<view>{{result}}</view>

count-down.js

/*** 自定义倒计时* endTime 结束的时间 默认单位为ms* format dd-hh-mm-ss 时间格式* endText  结束提示语* countEnd 倒计时结束函数*/let timer = null,intval = 1000;Component({properties: {// 是否为时间戳模式isTimeStamp: {type: Boolean,defalute: false},// 倒计时结束时间endTime: {type: Number,value: 60 * 1000},// 倒计时格式format: {type: String,value: "{DD}:{HH}:{mm}:{ss}"},// 结束提示endText: {type: String,value: "已结束"},//当前时间currentTime: {type: Number,value: new Date().getTime()}},// 样式options:{addGlobalClass:true,},data: {result: "", //显示结果},lifetimes: {ready(){this.init();},detached() {//组件销毁时清除定时器 防止爆栈clearTimeout(timer);},},methods: {start(){this.init();},// 时间格式处理format(formatStr, time) {// 使用正则体换格式formatStr = formatStr.replace(/{DD}/, this.formatNumber(time.d)).replace(/{HH}/, this.formatNumber(time.h)).replace(/{mm}/, this.formatNumber(time.m)).replace(/{ss}/, this.formatNumber(time.s)).replace(/{D}/, time.d).replace(/{H}/, time.h).replace(/{m}/, time.m).replace(/{s}/, time.s).replace(/{S}/, time.S)return formatStr;},defaultFormat(time) {let daydiff = 24 * 60 * 60 * 1000;let hoursdiff = 60 * 60 * 1000;let minutesdiff = 60 * 1000;let d = Math.floor(time / daydiff); //天数let h = Math.floor((time - d * daydiff) / hoursdiff);let m = Math.floor((time - d * daydiff - h * hoursdiff) / minutesdiff);let s = Math.floor((time - d * daydiff - h * hoursdiff - m * minutesdiff) / 1000);let S = time / 1000;return {d,h,m,s,S}},//定时启动init() {timer = setTimeout(() => {if (this.data.endTime < intval) {console.log(123)this.setData({result: this.data.endText})clearTimeout(timer);this.countEnd && this.countEnd()return false;}let time = this.timeStamp();let formTime = this.defaultFormat(time)let res = this.format(this.data.format, formTime);this.setData({result: res})this.currentFn && this.currentFn(this.data.endTime)this.data.endTime -= intval;this.init();}, intval)},// 时间戳处理timeStamp() {if (this.data.isTimeStamp) {let endTime = this.data.endTime - this.data.currentTime;return endTime;}return this.data.endTime;},// 倒计时结束处理函数countEnd() {this.triggerEvent("countEnd")},// 倒计时进行时函数currentFn(time){this.triggerEvent("currentFn",time)},// 补零操作formatNumber(n) {n = n.toString()return n[1] ? n : `0${n}`}}})

微信小程序倒计时组件相关推荐

【重构】微信小程序倒计时组件
回想在4个月前刚刚进入公司实习时,我封装了一个应用于小程序的倒计时组件. 链接在这里:微信小程序之倒计时组件以现在的视角再去看之前的实现可以说是一坨看不下去的烂代码.所以也借此机会,将之前的组件重构 ...
微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
微信小程序 MinUI 组件库系列之 loadmore 页底组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序Demo组件大全（对话框、指示器、五星评分，画廊，影院座位……
微信小程序 - 自定义组件预览用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用组件的wxml结构请看src/components/下的组件样式文件可直接引用src ...
微信小程序 MinUI 组件库系列之 abnor 异常流组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...

微信小程序倒计时组件

微信小程序倒计时组件相关推荐

最新文章

热门文章