微信小程序数字滚动插件使用详解


Posted in Javascript onFebruary 02, 2018

用es6语法方式写了个微信小程序小插件?数字滚动;

效果图:

微信小程序数字滚动插件使用详解

wxml页面布局代码:

<!--pages/main/index.wxml--><view class="animate-number">
  <view class="num num1">{{num1}}{{num1Complete}}</view>
  <view class="num num2">{{num2}}{{num2Complete}}</view>
  <view class="num num3">{{num3}}{{num3Complete}}</view>
  <view class="btn-box">
  <button bindtap="animate" type="primary" class="button">click me</button>
  </view></view>

index.js调用NumberAnimate.js

// pages/main/index.jsimport NumberAnimate from "../../utils/NumberAnimate";Page({
 data:{ 
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数 
 },
 onReady:function(){ 
 },
 onShow:function(){
 
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 }, 
 onUnload:function(){
  // 页面关闭 
 },
 //调用NumberAnimate.js中NumberAnimate实例化对象,测试3种效果
 animate:function(){
 
  this.setData({
   num1:'',
   num2:'',
   num3:'',
   num1Complete:'',
   num2Complete:'',
   num3Complete:''
  });
 
  let num1 = 18362.856;
  let n1 = new NumberAnimate({
    from:num1,//开始时的数字
    speed:2000,// 总时间
    refreshTime:100,// 刷新一次的时间
    decimals:3,//小数点后的位数
    onUpdate:()=>{//更新回调函数
     this.setData({
      num1:n1.tempValue     });
    },
    onComplete:()=>{//完成回调函数
      this.setData({
       num1Complete:" 完成了"
      });
    }
  });
 
  let num2 = 13388;
  let n2 = new NumberAnimate({
    from:num2,
    speed:1500,
    decimals:0,
    refreshTime:100,
    onUpdate:()=>{
     this.setData({
      num2:n2.tempValue     });
    },
    onComplete:()=>{
      this.setData({
       num2Complete:" 完成了"
      });
    }
  });
 
  let num3 = 2123655255888.86;
  let n3 = new NumberAnimate({
    from:num3,
    speed:2000,
    refreshTime:100,
    decimals:2,
    onUpdate:()=>{
     this.setData({
      num3:n3.tempValue     });
    },
    onComplete:()=>{
      this.setData({
       num3Complete:" 完成了"
      });
    }
  });
 }})

NumberAnimate.js代码: 

/**
 * Created by wangyy on 2016/12/26.
 */'use strict';class NumberAnimate {
 
  constructor(opt) {
    let def = {
      from:50,//开始时的数字
      speed:2000,// 总时间
      refreshTime:100,// 刷新一次的时间
      decimals:2,// 小数点后的位数
      onUpdate:function(){}, // 更新时回调函数
      onComplete:function(){} // 完成时回调函数
    }
    this.tempValue = 0;//累加变量值
    this.opt = Object.assign(def,opt);//assign传入配置参数
    this.loopCount = 0;//循环次数计数
    this.loops = Math.ceil(this.opt.speed/this.opt.refreshTime);//数字累加次数
    this.increment = (this.opt.from/this.loops);//每次累加的值
    this.interval = null;//计时器对象
    this.init();
  }
  init(){
    this.interval = setInterval(()=>{this.updateTimer()},this.opt.refreshTime);
  }
 
  updateTimer(){
 
    this.loopCount++;
    this.tempValue = this.formatFloat(this.tempValue,this.increment).toFixed(this.opt.decimals);
    if(this.loopCount >= this.loops){
      clearInterval(this.interval);
      this.tempValue = this.opt.from;
      this.opt.onComplete();
    }
    this.opt.onUpdate();
  }
  //解决0.1+0.2不等于0.3的小数累加精度问题
  formatFloat(num1, num2) {
    let baseNum, baseNum1, baseNum2;
    try {
      baseNum1 = num1.toString().split(".")[1].length;
    } catch (e) {
      baseNum1 = 0;
    }
    try {
      baseNum2 = num2.toString().split(".")[1].length;
    } catch (e) {
      baseNum2 = 0;
    }
    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
    return (num1 * baseNum + num2 * baseNum) / baseNum;
  };}export default NumberAnimate;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
JavaScript实现星级评价效果
May 17 Javascript
JS中的BOM应用
Feb 02 #Javascript
微信小程序实现文字跑马灯效果
May 26 #Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 #Javascript
vuex的简单使用教程
Feb 02 #Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
JScript实现表格的简单操作
2017/08/15 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python实现猜单词小游戏
2020/05/22 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python next()和iter()函数原理解析
2020/02/07 Python
基于Python fminunc 的替代方法
2020/02/29 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
python map比for循环快在哪
2020/09/21 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
公司领导推荐信
2013/11/12 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
2013年军训通讯稿
2014/02/05 职场文书
学术诚信承诺书
2014/05/26 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2014年纪检工作总结
2014/11/12 职场文书
总经理聘用协议书
2015/09/21 职场文书