[小程序] [作品] 微信小程序odometer数字滚动动画组件

最近一个项目《卡片读心术》小程序需要用到一个数字滚动的动画效果，在github上找到一个js版本的，所以用在小程序上修改应该不大，所以顺便做成了组件的版本，简化了一些功能，去掉千位分隔符、小数和自定义格式。

效果

案例

卡片读心术小程序

首先把组件文件夹odometer整个复制到项目中。

在用到的页面json文件中声明使用组件：

JSON

{
	"usingComponents": {
		"odometer": "/path/to/odometer"
	}
}

页面对应wxml中使用标签：

HTML

<odometer id="odometer" odometer-class="odometer" value-class="odometer-value" duration="2000" />

属性介绍

属性名	类型	默认值	说明
id	String		标签唯一id，用于选取标签进行后续操作
odometer-class	String		最外层容器的样式类
value-class	String		数字的样式类
duration	Number	2000	动画的过渡持续时间

方法介绍

方法名	参数	说明
show		显示组件
hide		隐藏组件（不透明度为0）
setValue	value	设置组件的值
startAnimate		开始动画
update	newValue	更新组件的值（相当于依次执行show、setValue、startAnimate）

示例

JSON

{
	"usingComponents": {
		"odometer": "/path/to/odometer"
	}
}

HTML

<!-- index.wxml -->
<odometer id="odometer" odometer-class="odometer" value-class="odometer-value" />

CSS

/* index.wxss */
.odometer {
    margin-top: 50px;
}

.odometer-value {
    font-size: 72px;
    font-weight: bold;
    color: #f64d8d;
}

JavaScript

/* index.js */
var that = this;
var odometer = this.selectComponent('#odometer'); // 获取组件实例
setTimeout(function() {
	odometer.update(30); // 1000ms后更新值为30
}, 1000);
setTimeout(function() {
	odometer.update(90); // 3500ms后更新值为90
}, 3500);
setTimeout(function() {
	odometer.update(50); // 5700ms后更新值为50
}, 5700);

项目源码

github：https://github.com/qwqoffice/odometer-for-wechatapp

gitee：https://gitee.com/qwqoffice/odometer-for-wechatapp

参考项目

https://github.com/HubSpot/odometer

赞赏

版权声明：本文为原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
本文链接：https://www.qwqoffice.com/article.php?mod=view&tid=48

发表您的留言