Metrics
0
Watch 5 Star 10 Fork 1

幻想小籽 / odometer-for-wechatappJavaScriptGPL-3.0

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
微信小程序odometer数字滚动动画组件 spread retract

https://www.qwqoffice.com/article.php?mod=view&tid=48

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

微信小程序odometer数字滚动动画组件

效果

odometer微信小程序版

案例

卡片读心术小程序

卡片读心术小程序

参考

odometer https://github.com/HubSpot/odometer

属性

属性名 类型 默认值 说明
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;
}
JS
/* 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);

赞赏

赞赏码

Comments ( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025