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


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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
深入理解JavaScript 箭头函数
May 30 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
PHP格式化显示时间date()函数代码
2018/10/03 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jquery实现图片预加载
2015/12/25 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Pycharm中如何关掉python console
2020/10/27 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
超市督导岗位职责
2015/04/10 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
保险公司增员口号
2015/12/25 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python