WxCountUp - 数字滚动（微信小程序插件）
github地址
wx-extend 欢迎star~~
插件介绍
该插件是参照 CountUp.js 封装的，为小程序提供的数字滚动，以更有趣的方式显示数值数据。
参数说明
Params
| 参数 | 类型 | 描述 |
|---|---|---|
| target |
String
|
滚动对象 |
| endVal |
Number
|
滚动结束时的数字 |
| options |
Object
|
配置 |
| context |
Object
|
微信小程序当前this对象，必填
|
Options （非必填项）
| 参数 | 类型 | 描述 |
|---|---|---|
| startVal |
Number
|
滚动开始时的数字，默认为0
|
| decimalPlaces |
Number
|
小数位数，默认为0
|
| duration |
Number
|
动画间隔时间，默认为2秒
|
| useGrouping |
Boolean
|
是否按组间隔，默认为true。例如：1,000 vs 1000
|
| useEasing |
Boolean
|
是否使用缓动效果，默认为true
|
| smartEasingThreshold |
Number
|
如果使用缓动，则对大于此值的大数值平滑缓动，默认为999
|
| smartEasingAmount |
Number
|
超过阈值的数字将被放宽，默认为333
|
| separator |
String
|
按组间隔标识，默认为','
|
| decimal |
String
|
小数点标识，默认为'.'
|
| easingFn |
Function
|
例如 (t: number, b: number, c: number, d: number) => number;
|
| formattingFn |
Function
|
例如 (n: number) => string;
|
| prefix |
String
|
以结果为前缀的文本，默认为空 |
| suffix |
String
|
以结果为后缀的文本，默认为空 |
| numerals |
String
|
数字符号替换 |
使用方法
import WxCountUp from '../../plugins/wx-countup/WxCountUp.js'Page({data: {number: 0},onLoad: function () {// 最后一个参数必填this.countUp = new WxCountUp('number', 5234, {}, this);},start() { this.countUp = new WxCountUp('number', 5234, {}, this); // 开始动画this.countUp.start();// this.countUp.start(() => console.log('Complete!'));},pauseResume() {// 暂停/重新开始this.countUp.pauseResume();},reset() {// 重置this.countUp.reset();},update() {// 更新为新值this.countUp.update(1000);},
})复制代码更多方法及配置参考 CountUp.js
更改部分
- CountUp.js 源代码使用
document浏览器提供的DOM操作接口，在微信小程序中并不支持。只能通过传入一个this(当前上下文对象) 来setData改变数据。 - 在真机调试的时候，发现真机不支持
requestAnimationFrame方法，只得通过setTimeout来模拟出requestAnimationFrame的效果。
参考
- CountUp.js
- 微信小程序 canvas 动画踩坑——requestAnimationFrame 帧渲染
WxCountUp - 数字滚动（微信小程序插件）相关推荐
- 微信小程序插件---表单验证篇
微信小程序插件---表单验证篇 项目下载地址 WxValidate - 表单验证 插件介绍 该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电 ...
- 微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
- 从原理到应用，一文带你了解微信小程序插件能力
3月13日,微信小程序插件功能上线:8月底,在时隔半年后,为进一步推广插件功能,微信在开发者社区上线了插件版块. 小程序插件是可以被开发者添加到小程序内直接使用的,能为用户提供具体服务的功能组件-- ...
- 「腾讯地图」微信小程序插件：提供简单的路线多方案规划服务
上期,我们在<「腾讯视频」微信小程序插件介绍>一文中介绍了「腾讯视频」小程序插件的意义.使用场景以及使用方法. 今天我们会与大家分享一款同样优秀的小程序插件--「腾讯地图」插件,从使用场景 ...
- 微信小程序插件引入，地铁图插件、地图选点插件、地图选点插件
如果用微信小程序插件需要开发者秘钥:申请秘钥 第一步:记住下面内容一定要写在app.json这个文件里 "plugins": {"subway": {" ...
- uniapp + uniapp2wxpack构建微信小程序插件
目录 一.环境搭建 1. 构建示例时运行环境(版本无需固定,根据自己需要调整): 二.构建步骤 1. 准备一个纯净的uni-app项目 1.1 通过vue-cli创建uni-app 2. 运行unia ...
- 微信小程序插件怎么开发
小程序开发教程由小程序资讯提供 近期,微信小程序发布了重大功能更新,支持插件的使用和开发.消息一出,小程序开发者蜂拥而至,开始专研插件开发,不久后会有一批优质服务的插件上线是可以预见的.从开发者的角度 ...
- android 支付数字键盘,微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘...
(此图片来源于网络,如有侵权,请联系删除! ) 前几天有开发过一个html5仿支付宝.微信支付数字键盘,在某些特定场景下自定义数字键盘应用还是蛮广泛的,比如 小程序商城系统 需要零钱支付 ,会员卡支付 ...
- 微信小程序插件新增能力
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: " 小程序插件能力升级:开放插件登录能力,帮助插件开发者更好地管理用户:支持在插件内使用微信 ...
最新文章
- linux shell 常用基本语法
- springboot取yml中的值_@Value拜拜：更优雅的获取springboot yml中的值
- shiro---注解
- 如何赛筛选出多列内容相同的数据??
- GAN的一些重要论文
- PS 滤镜算法原理——染色玻璃
- Java本地缓存CaffeineCache集成
- 神州租车：陆正耀辞任公司董事会主席及非执行董事职务
- Cloudflare泄露客户数据，IT部门可从中吸取什么教训?
- 周鸿祎评互联网大佬的编程能力：我能排前三，谁排第一？
- [R语言绘图]饼状图pie
- 小白文件管理器 无法与服务器建立联系,小白文件管理器怎么用
- R语言绘图的中文字体处理
- 微博营销常用操作方法总结
- img标签的alt属性和title属性的区别
- R语言检验独立性：卡方检验(Chi-square test)和费舍尔Fisher精确检验分析案例报告
- 从Unity商店下载的插件存放的位置
- 用c语言做一个栈，完成逆波兰表达式
- css宋体代码_css怎么设置字体为宋体
- 移动端点击事件的延迟