码云 IDEA 插件最新版本发布,支持 Pull Request

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

指数
0
Watch 5 Star 10 Fork 1
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
微信小程序odometer数字滚动动画组件 展开 收起

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

取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
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);

赞赏

赞赏码

点评 ( 0 )

你可以在登录后,发表评论

搜索帮助