金狮贵宾会

登录
免费开通

小程序倒计时组件实现源码

 小程序中,,,许多都要使用倒计时插件,,,好比秒杀功效,,,好比验证码倒计时,,,那么下面为各人介绍小程序倒计时的插件 。。。

小程序倒计时组件实现源码

  介绍:

  用于在微信小程序中举行倒计时的组件 。。。

  功效:

  1、最基础的虽然就是倒计时功效了 。。。

  2、可以设置倒计时竣事后执行的事务 。。。

  3、可以设置倒计时执行历程中每隔几多秒,,,执行一次对应的事务 。。。

  在JS中挪用

  1.在目今js引入

  timer = require('../../plug/wxTimer.js')

  2.在全局app.js引入

  app.js

  globalData: {

  userInfo: null,

  timer: require('/plug/wxTimer.js')

  }

  目今js

  var app = getApp().globalData,

  timer = app.timer;

  最简朴的挪用方式:

  var wxTimer = new timer({

  beginTime:"00:00:10"

  })

  wxTimer.start(this);

  wxTimer.stop();

  开启多个计时

  //开启第一个准时器

  var wxTimer1 = new timer({

  beginTime:"00:00:10",

  name:'wxTimer1',

  complete:function(){

  console.log("完成了")

  }

  })

  wxTimer1.start(this);

  //开启第二个准时器

  var wxTimer2 = new timer({

  beginTime:"00:01:11",

  name:'wxTimer2',

  complete:function(){

  console.log("完成了")

  }

  })

  wxTimer2.start(this);

  倒计时竣事后执行事务

  var wxTimer = new timer({

  beginTime:"00:00:10",

  complete:function(){

  console.log("完成了")

  }

  })

  wxTimer.start(this);

  距离执行事务

  var wxTimer = new timer({

  beginTime:"00:00:10",

  complete:function(){

  console.log("完成了")

  },

  interval:2,

  intervalFn:function(){

  console.log("已往了2秒");

  }

  })

  校准时间

  wxTimer.calibration();

  竣事计时

  wxTimer.stop();

  在wxml中引用

  单个计时器:

  显示剩余时间:{{wxTimer}}

  显示剩余秒数:{{wxTimerSecond}}

  多个计时器:

  显示计时器1的剩余时间:{{wxTimerList['wxTimer1'].wxTimer}}

  显示计时器2的剩余时间:{{wxTimerList['wxTimer2'].wxTimer}}

  显示计时器1的剩余秒数:{{wxTimerList['wxTimer1'].wxTimerSecond}}

  显示计时器2的剩余秒数:{{wxTimerList['wxTimer2'].wxTimerSecond}}

  注重:

  1、由于内部需要挪用到小程序的setData要领,,,以是我们需要把this传已往 。。。

  2、此要体会在page中天生一个名为wxTimer,,,wxTimerSecond和wxTimerList的数据,,,请包管这些key没有被占用 3、请在data中添加一条属性wxTimerList:{},否则将会报错 。。。

  其他参数:

  1、beginTime 需要倒计时的时间,,,好比:"01:11:12",,,默认值为"00:00:00",,,也可以省略秒数,,,如:"01:10"

  2、complete 倒计时归零0时的回调函数,,,若是为beginTime = "00:00:00"则连忙挪用

  3、interval 倒计时的历程中,,,划定每隔几秒执行一次intervalFn,,,若是为0则永远不会执行,,,默以为1

  4、intervalFn 每隔interval秒执行一次的函数 。。。

小程序工具提供多类型商城/门店小程序制作,,,可视化编辑 1秒天生5步上线 。。。通过拖拽、拼接???榻峁剐〕绦蛏坛且趁妫,,所看即所得,,,只需要美工就能做出细腻商城 。。。
更多小程序开发案例,,,尽在:/miniprogramschool/kaifa.html   

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,若有知识产权人并不肯意我们使用,,,若是有侵权请连忙联系 。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,仅系客观性形貌,,,如您需要相识该类商品/服务详细的资讯,,,请您直接与该类商品/服务的提供者联系 。。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案 。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等 。。。

KESION 一直通过手艺立异,,,提供产品和服务,,,助力企业向数字化转型,,,通过科技驱动商业刷新,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



热门标签
微信小程序 SaaS
上/下篇
  • 小程序实现倒计时功效的实现方式

  • 贝贝拼团小程序2017社交电商之路及2018战略安排

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
小程序倒计时组件实现源码 - KESION 金狮贵宾会