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


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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
js简单倒计时实现代码
Apr 30 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 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
德生PL990的分析评价
2021/03/02 无线电
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python多线程爬虫简单示例
2016/03/04 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python WindowsError的错误代码详解
2017/07/23 Python
在Python中COM口的调用方法
2019/07/03 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
空指针到底是什么
2012/08/07 面试题
后勤工作职责
2013/12/22 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
应届生找工作求职信
2014/06/24 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
小学四年级学生评语
2014/12/26 职场文书
寻找成龙观后感
2015/06/12 职场文书
python 中yaml文件用法大全
2021/07/04 Python