开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
CountTo 数字滚动
CountTo 数字滚动 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
基本使用
通过start-val
设置开始值,end-val
设置结束值
<u-count-to :start-val="30" :end-val="500"></u-count-to>
设置滚动相关参数
- 通过
duration
设置从开始值到结束值整个滚动过程所需的时间,单位ms
- 通过
use-easing
设置滚动快结尾的时候,是否放慢滚动的速度,给用户更好的视觉效果
<u-count-to :start-val="30" :end-val="500" :duration="2000" :use-easing="false"></u-count-to>
是否显示小数位
通过decimals
设置显示的小数位,如果设置了,在滚动过程中,小数位会一起变化。如果start-val
和end-val
是带小数的,应该设置decimals
为 start-val
和end-val
一样的小数位数值,如end-val
为1200.55,那么decimals
应该设置为2。
<u-count-to :start-val="30" :end-val="500.55" :decimals="2"></u-count-to>
千分位分隔符
通过separator
配置千分位分隔符,默认为空字符串,可以设置英文逗号",",此参数表现为end-val
值超过1000时,比如为"1257",那么滚动后会变成"1,245",在金额数值时, 该参数可能会用上。
<u-count-to :end-val="1542" separator=","></u-count-to>
滚动执行的时机
可以通过autoplay
设置是否需要初始化时就开始滚动,默认为true
,如果设置为false
,可以通过组件的ref
去控制组件内部的start()
和paused()
方法来开始或暂停。
<template>
<u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
</template>
<script>
export default {
data() {
return {
endVal: 5000.55,
autoplay: false
};
},
methods: {
start() {
this.$refs.uCountTo.start();
},
paused() {
this.$refs.uCountTo.paused();
},
reStart() {
this.$refs.uCountTo.reStart();
},
}
}
</script>
API
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
start-val | 开始值 | String | Number | 0 | - |
end-val | 结束值 | String | Number | 0 | - |
duration | 滚动过程所需的时间,单位ms | String | Number | 2000 | - |
autoplay | 是否自动开始滚动 | Boolean | true | false |
decimals | 要显示的小数位数,见上方说明 | String | Number | 0 | - |
use-easing | 滚动结束时,是否缓动结尾,见上方说明 | Boolean | true | false |
separator | 千位分隔符,见上方说明 | String | - | - |
color | 字体颜色 | String | #303133 | - |
font-size | 字体大小,单位rpx | String | Number | 50 | - |
bold | 字体是否加粗 | Boolean | false | true |
Methods
此方法如要通过ref手动调用
名称 | 说明 |
---|---|
start | autoplay 为false 时,通过此方法启动滚动 |
reStart | 暂停后重新开始滚动(从暂停前的值开始滚动) |
paused | 暂停滚动 |
Event
事件名 | 说明 | 回调参数 | 版本 |
---|---|---|---|
end | 数值滚动到目标值时触发 | - | - |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论