[小程序] [作品]  微信小程序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


赞赏

发表您的留言