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


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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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中的按位与和按位或操作示例
2014/01/27 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
12步教你理解Python装饰器
2016/02/25 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python输出指定字符串的方法
2020/02/06 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
.net C#面试题
2012/08/28 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
考试违纪检讨书
2014/02/02 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2014年党总支工作总结
2014/12/18 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
高一作文之乐趣
2019/11/21 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript